<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>安知鱼主题标签 Tag Plugins | 云少IT</title><meta name="keywords" content="云少IT,IT,技术,分享,程序员,博客,教程,工具,框架,bug,java,spring,数据库,"><meta name="author" content="云少"><meta name="copyright" content="云少"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-touch-fullscreen" content="yes"><meta name="apple-mobile-web-app-title" content="安知鱼主题标签 Tag Plugins"><meta name="application-name" content="安知鱼主题标签 Tag Plugins"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="#ffffff"><meta property="og:type" content="article"><meta property="og:title" content="安知鱼主题标签 Tag Plugins"><meta property="og:url" content="https://it985.github.io/posts/d50a.html"><meta property="og:site_name" content="云少IT"><meta property="og:description" content="添加大量外挂标签样式。"><meta property="og:locale" content="zh-CN"><meta property="og:image" content="https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp"><meta property="article:author" content="云少"><meta property="article:tag" content="云少IT,IT,技术,分享,程序员,博客,教程,工具,框架,bug,java,spring,数据库,"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp"><meta name="description" content="添加大量外挂标签样式。"><link rel="shortcut icon" href="/img/logo.webp"><link rel="canonical" href="https://it985.github.io/posts/d50a"><link rel="preconnect" href="//npm.elemecdn.com"><link rel="preconnect" href="//npm.onmicrosoft.cn"><link rel="preconnect" href="//www.google-analytics.com" crossorigin=""><link rel="preconnect" href="//busuanzi.ibruce.info"><meta name="google-site-verification" content="NuBZ4r-QCqSgo4XUScdEsQW0bolIHEiVGq4A16ndPQA"><meta name="baidu-site-verification" content="code-xxx"><meta name="msvalidate.01" content="xxx"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.cbd.int/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.cbd.int/@fancyapps/ui@5.0.20/dist/fancybox/fancybox.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css" media="print" onload='this.media="all"'><script async src="https://www.googletagmanager.com/gtag/js?id=G-3VMKW5TZBM"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-3VMKW5TZBM")</script><script>const GLOBAL_CONFIG={linkPageTop:{enable:!0,title:"与数百名博主无限进步",addFriendPlaceholder:"昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n站点截图（可选）：\n"},peoplecanvas:void 0,postHeadAiDescription:{enable:!0,gptName:"云AI",mode:"tianli",switchBtn:!1,btnLink:"https://afdian.net/item/886a79d4db6711eda42a52540025c377",randomNum:3,basicWordCount:1e3,key:"48580d1e3f53ae174a1e",Referer:"https://blog.tryrun.top"},diytitle:{enable:!0,leaveTitle:"w(ﾟДﾟ)w 不要走！再看看嘛！",backTitle:"♪(^∇^*)欢迎肥来！"},LA51:{enable:!0,ck:"JiFOrFoQklEn9YLS",LingQueMonitorID:"JiqlTmdeI4e1fPbd"},greetingBox:{enable:!0,default:"晚上好👋",list:[{greeting:"晚安😴",startTime:0,endTime:5},{greeting:"早上好鸭👋, 祝你一天好心情！",startTime:6,endTime:9},{greeting:"上午好👋, 状态很好，鼓励一下～",startTime:10,endTime:10},{greeting:"11点多啦, 在坚持一下就吃饭啦～",startTime:11,endTime:11},{greeting:"午安👋, 宝贝",startTime:12,endTime:14},{greeting:"🌈充实的一天辛苦啦！",startTime:14,endTime:18},{greeting:"19点喽, 奖励一顿丰盛的大餐吧🍔。",startTime:19,endTime:19},{greeting:"晚上好👋, 在属于自己的时间好好放松😌~",startTime:20,endTime:24}]},twikooEnvId:"https://twikoo.tryrun.top/",commentBarrageConfig:void 0,root:"/",preloader:{source:2},friends_vue_info:{apiurl:"https://friends.tryrun.top/"},navMusic:!1,mainTone:void 0,authorStatus:{skills:["🤖️ 数码科技爱好者","🔍 分享与热心帮助","🏠 智能家居小能手","🔨 设计开发一条龙","🤝 专修交互与设计","🏃 脚踏实地行动派","🧱 团队小组发动机","💢 壮汉人狠话不多"]},algolia:{appId:"T5VW6VDYLS",apiKey:"227bcb041816af13cb1698db15a8ac89",indexName:"hexo-blog",hits:{per_page:6},languages:{input_placeholder:"输入关键词后按下回车查找",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:{defaultEncoding:2,translateDelay:0,msgToTraditionalChinese:"繁",msgToSimplifiedChinese:"简",rightMenuMsgToTraditionalChinese:"转为繁体",rightMenuMsgToSimplifiedChinese:"转为简体"},noticeOutdate:{limitDay:365,position:"top",messagePrev:"It has been",messageNext:"days since the last update, the content of the article may be outdated."},highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:330},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!0,simplehomepage:!1,post:!0},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"#425AEF",bgDark:"#1f1f1f",position:"top-center"},source:{justifiedGallery:{js:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.min.js",css:"https://cdn.cbd.int/flickr-justified-gallery@2.1.2/dist/fjGallery.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1,shortcutKey:void 0,autoDarkmode:!0}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={configTitle:"云少IT",title:"安知鱼主题标签 Tag Plugins",postAI:"true",pageFillDescription:"按钮 btns, 按钮 btn, 网站卡片 sites, 单张图片 image, inlineImg 行内图片, 行内图片 inlineimage, label 标签, timeline, flink 友链标签, mermaid 图, 复选列表 checkbox, dogeplayer 多吉云播放器, 折叠框 folding, Gallery 相册图库, tag-hide, 链接卡片 link, 单选列表 radio, 上标标签 tip, Note (Bootstrap Callout), 音频 audio, 视频 video, 段落文本 p, 行内文本 span, 行内文本样式 text主题中大部分标签移植于店长的转载请注明来自安知鱼按钮标签语法参数配置样式预览示例源码样式参数标题链接图片或者图标标题链接图片或者图标圆角样式增加文字样式可以在容器内增加标题和描述文字布局方式默认为自动宽度适合视野内只有一两个的情况参数含义宽一点的按钮填充布局自动铺满至少一行多了会换行居中按钮之间是固定间距居中分散等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数等宽最多列屏幕变窄会适当减少列数如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版如果需要显示类似团队成员之类的一组含有头像的链接或者含有图标的按钮下载源码查看文档圆形图标标题描述图片网格列居中心率管家专业版心率管家免费版按钮标签语法参数配置样式预览示例源码链接按钮文字可选图标可选按钮背景顔色默认时按钮字体和边框顔色时可选按钮样式默认实心留空可选按钮佈局默认为留空可选按钮位置前提是设置了为默认为左边留空可选按钮大小留空参数含义链接按钮文字可选图标如果开启了可以使用的图标否则只能使用默内置图标可选按钮背景顔色默认时按钮字体和边框顔色时可选按钮样式默认实心数留空可选按钮佈局默认为留空可选按钮位置前提是设置了为默认为左边留空数可选按钮大小留空一组按钮调整位置大小居中按钮一组按钮调整位置大小居中按钮网站卡片标签语法样式预览示例源码标题链接截图链接头像链接可选描述可选标题链接截图链接头像链接可选描述可选简约风格这是一段关于这个网站的描述文字这是一段关于这个网站的描述文字单张图片标签语法参数配置样式预览示例源码链接宽度可选高度可选描述可选占位颜色可选图片宽度高度图片描述图片描述需要在主题配置文件中开启图片描述占位背景色添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感添加描述每天下课回宿舍的路没有什么故事指定宽度指定宽度并添加描述每天下课回宿舍的路没有什么故事设置占位背景色优化不同宽度浏览的观感行内图片标签语法参数配置样式预览示例源码图片链接图片高度限制可选参数含义图片链接图片高度限制可选你看我长得漂亮不我觉得很漂亮你看我长得漂亮不我觉得很漂亮行内图片标签语法参数配置样式预览示例源码图片链接高度可选高度这是一段话这又是一段话这是一段话这又是一段话标签标签语法参数配置样式预览示例源码参数含义文字可选背景颜色默认为臣亮言先帝创业未半而中道崩殂今天下三分益州疲敝此诚危急存亡之秋也然侍衞之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也宫中府中俱为一体陟罚臧否不宜异同若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之治不宜偏私使内外异法也臣亮言先帝创业未半而中道崩殂今天下三分益州疲敝此诚危急存亡之秋也然侍衞之臣不懈于内忠志之士忘身于外者盖追先帝之殊遇欲报之于陛下也诚宜开张圣听以光先帝遗德恢弘志士之气不宜妄自菲薄引喻失义以塞忠谏之路也宫中府中俱为一体陟罚臧否不宜异同若有作奸犯科及为忠善者宜付有司论其刑赏以昭陛下平明之治不宜偏私使内外异法也标签语法参数配置样式预览示例源码参数含义标题时间线颜色留空默认颜色这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面默认颜色这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面这是测试页面友链标签可在任何界面插入类似友情链接列表效果内容格式与友情链接界面一样支持格式注意数据具有格式要求请注意格式对齐防止被编辑器格式化导致格式错误从而报错标签语法参数配置样式预览示例源码参数含义标题可选友链样式默认为可选友链样式默认为推荐博客安知鱼网站值得推荐的网站视频网站中国最大社交分享平台社交分享平台推荐博客安知鱼生活明朗万物可爱网站值得推荐的网站视频网站中国最大社交分享平台社交分享平台图使用标签可以绘制流程图时序图类别图状态图甘特图和圆形图具体可以查看文档修改主题配置文件标签语法样式预览示例源码内容复选列表标签语法配置参数样式预览示例源码样式参数可选文本支持简单样式颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉纯文本测试支持简单的语法支持自定义颜色绿色默认选中黄色默认选中青色默认选中蓝色默认选中增加减少叉多吉云播放器快捷引入多吉云视频标签语法参数配置样式预览示例源码获取与参数含义多吉云视频折叠框折叠框标签语法配置参数样式预览示例源码参数可选标题颜色状态状态填写代表默认打开查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试查看图片测试查看默认打开的折叠框这是一个默认打开的折叠框查看代码测试假装这里有代码块代码块没法嵌套代码块查看列表测试查看嵌套测试查看嵌套测试查看嵌套测试相册图库一个图库集合标签语法参数配置样式预览示例源码相册图库相册本地远程图片格式图片格式图片格式参数名释义可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为参数名释义必须识别词必须远程的链接可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为远程链接的例子有三个参数是必须存在的和可有也可没有这是示例相册图库参数名释义图库名字图库描述链接到对应相册的地址图库封面思维拓展一下相册图库的实质其实就是个快捷方式可以自定义添加描述封面链接那么我们未必要把它当做一个相册完全可以作为一个链接卡片链接到视频友链都是不错的选择相册区别于旧版的相册新的相册会自动根据图片长度进行排版书写也更加方便与格式一样可根据需要插入到相应的无需再自己配置长宽建议在粘贴时故意使用长短大小横竖不一的图片会有更好的效果尺寸完全相同的图片只会平铺输出效果很糟糕本地远程图片格式图片格式图片格式参数名释义可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为参数名释义必须识别词必须远程的链接可选点击按钮加载更多图片填写默认为可选图片显示的高度如果需要一行显示更多的图片可设置更小的数字默认为可选每次加载多少张照片默认为远程链接的例子有三个参数是必须存在的和可有也可没有这是示例相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册加载更多对于很多同学提问的和相册页的链接问题这里说下我个人的使用习惯一般使用相册图库的话可以在导航栏加一个的使用指令添加里面放相册图库作为封面然后在下面建立相应的文件夹例如若按照这里的示例若欲使用路径访问相册则需要新建并在里面填入相册内容注意本站相册集为单独优化可参考配置相册页面相册图库在六花服务器里留下的足迹哦咧哇哒某种意义上也算自拍吧相册如果你想把一些文字内容隐藏起来并提供按钮让用户点击显示可以使用这个标签外挂请注意内的标签外挂内都不建议有等标题因为会把隐藏内容标题也显示出来而且当滚动屏幕时如果隐藏内容没有显示出来会导致的滚动出现异常在文本里面添加按钮隐藏内容只限文字不能包含英文逗号可用文本内容按钮显示的文字可选按钮的背景颜色可选按钮文字的颜色可选哪个英文字母最酷因为西装裤装酷查看答案门里站着一个人闪哪个英文字母最酷查看答案因为西装裤装酷门里站着一个人闪独立的隐藏内容可以隐藏很多内容包括图片代码块等等不能包含英文逗号可用文本内容按钮显示的文字可选按钮的背景颜色可选按钮文字的颜色可选查看答案查看答案傻子怎么可能有答案查看答案查看答案傻子怎么可能有答案如果你需要展示的内容太多可以把它隐藏在收缩框里需要时再把它展开不能包含英文逗号可用主题安装方法在你的博客根目录里如果想要安装比较新的分支可以链接卡片标签语法样式预览示例源码标题站点描述链接图片链接可选引用站外地址获取网站的图标并显示在你的网页上获取网站的图标并显示在你的网页上单选列表标签语法配置参数样式预览示例源码样式参数可选文本支持简单颜色选中状态纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色纯文本测试支持简单的语法支持自定义颜色绿色黄色青色蓝色上标标签主要样式参考自小康的渐变背景标签标签语法配置参数样式预览示例源码参数可选文本内容样式自定义图标支持自定义图标自定义图标通用配置语法格式配置参数样式预览示例源码修改主题配置文件标签外挂有两种用法和只对方法一生效图标需开启主题配置文件中方法一方法二方法一参数用法可选标识不同的标识有不同的配色可选不显示可选可以覆盖配置中的方法二参数用法可选标识不同的标识有不同的配色可选可配置自定义支持图标和主题内置的阿里图标图标需开启主题配置文件中也可以配置可选可以覆盖配置中的方法一样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签方法二图标支持和主题内置的阿里图标使用方法为加上对应的类名图标需开启主题配置文件中默认未开启样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器方法一样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签样式默认提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签提示块标签方法二图标支持和主题内置的阿里图标使用方法为加上对应的类名图标需开启主题配置文件中默认未开启样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式主题内置阿里图标你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器图标开启主题配置文件中的为后可见你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器样式你是刷还是年快到了小心开车安全至上这是三片呢还是四片你是刷还是剪刀石头布前端最讨厌的浏览器音频标签语法样式预览示例源码音频链接视频标签语法参数配置样式预览示例源码视频链接对其方向列数逗号后面直接写列数支持列宽度宽度宽度宽度宽度宽度段落文本标签语法配置参数样式预览示例源码样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字行内文本标签语法配置参数样式预览示例源码样式参数参数以空格划分文本内容字体颜色大小对齐方向彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字彩色文字在一段话中方便插入各种颜色的标签包括红色黄色绿色青色蓝色灰色超大号文字文档开始页面中的标题部分就是超大号文字行内文本样式标签语法样式预览示例源码文本内容文本内容文本内容文本内容文本内容文本内容带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码带下划线的文本带着重号的文本带波浪线的文本带删除线的文本键盘样式的文本密码样式的文本这里没有验证码",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2023-06-01 15:55:44",postMainColor:""}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:(e,t,a)=>{var o;0!==a&&(o=Date.now(),localStorage.setItem(e,JSON.stringify({value:t,expiry:o+864e5*a})))},get:e=>{var t=localStorage.getItem(e);if(t){t=JSON.parse(t);if(!(Date.now()>t.expiry))return t.value;localStorage.removeItem(e)}}},e.getScript=(o,c={})=>new Promise((t,e)=>{const a=document.createElement("script");a.src=o,a.async=!0,a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},Object.keys(c).forEach(e=>{a.setAttribute(e,c[e])}),document.head.appendChild(a)}),e.getCSS=(o,c=!1)=>new Promise((t,e)=>{const a=document.createElement("link");a.rel="stylesheet",a.href=o,c&&(a.id=c),a.onerror=e,a.onload=a.onreadystatechange=function(){var e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};var e=saveToLocal.get("theme"),t=window.matchMedia("(prefers-color-scheme: dark)").matches,a=window.matchMedia("(prefers-color-scheme: light)").matches,o=window.matchMedia("(prefers-color-scheme: no-preference)").matches,c=!t&&!a&&!o,t=(void 0===e?(a?activateLightMode():t?activateDarkMode():(o||c)&&((a=(new Date).getHours())<=6||18<=a?activateDarkMode:activateLightMode)(),window.matchMedia("(prefers-color-scheme: dark)").addListener(e=>{void 0===saveToLocal.get("theme")&&(e.matches?activateDarkMode:activateLightMode)()})):("light"===e?activateLightMode:activateDarkMode)(),saveToLocal.get("aside-status"));void 0!==t&&("hide"===t?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="/css/1.min.css?1" media="async" onload='this.media="all"'><link rel="stylesheet" href="/css/bg.css?1" media="async" onload='this.media="all"'><meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="云少IT" type="application/atom+xml"><link rel="alternate" href="/rss.xml" title="云少IT" type="application/rss+xml"></head><body data-type="anzhiyu"><div id="web_bg"></div><div id="an_music_bg"></div><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.10/progress_bar/progress_bar.css"><script async src="https://cdn.cbd.int/pace-js@1.2.4/pace.min.js" data-pace-options="{ &quot;restartOnRequestAfter&quot;:false,&quot;eventLag&quot;:false}"></script><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><div id="nav-group"><span id="blog_name"><div class="back-home-button"><i class="anzhiyufont anzhiyu-icon-grip-vertical"></i><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.tryrun.top/" title="博客"><img class="back-menu-item-icon" src="/img/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.tryrun.top" title="图床"><img class="back-menu-item-icon" src="https://www.tryrun.top/favicon.ico" alt="图床"><span class="back-menu-item-text">图床</span></a></div></div></div></div><a id="site-name" href="/" accesskey="h"><div class="title">云少IT</div><i class="anzhiyufont anzhiyu-icon-house-chimney"></i></a></span><div class="mask-name-container"><div id="name-container"><a id="page-name" href="javascript:anzhiyu.scrollToDest(0, 500)" rel="external nofollow noreferrer">PAGE_NAME</a></div></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>望四方</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><i class="anzhiyufont anzhiyu-icon-box-archive faa-tada" style="font-size:.9em"></i><span> 归名档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size:.9em"></i><span> 归四类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags faa-tada" style="font-size:.9em"></i><span> 书中签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/charts/"><i class="fa-fw fas fa-chart-bar faa-tada"></i><span> 统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size:.9em"></i><span> 四方好友</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><i class="anzhiyufont anzhiyu-icon-artstation faa-tada" style="font-size:.9em"></i><span> 朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><i class="anzhiyufont anzhiyu-icon-envelope faa-tada" style="font-size:.9em"></i><span> 留言板</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>我的</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><i class="anzhiyufont anzhiyu-icon-bilibili faa-tada" style="font-size:.9em"></i><span> 追番页</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><i class="anzhiyufont anzhiyu-icon-images faa-tada" style="font-size:.9em"></i><span> 刹那间</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/equipment/"><i class="fas fa-heart faa-tada"></i><span> 我的装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/collect/"><i class="fas fa-camcorder faa-tada"></i><span> 观影阁</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><i class="anzhiyufont anzhiyu-icon-paper-plane faa-tada" style="font-size:.9em"></i><span> 关于本人</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><i class="anzhiyufont anzhiyu-icon-lightbulb faa-tada" style="font-size:.9em"></i><span> 闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-shoe-prints1 faa-tada" style="font-size:.9em"></i><span> 随便逛逛</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/disclaimer/"><i class="fas fa-heart faa-tada"></i><span> 免责声明</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/love/"><i class="anzhiyufont anzhiyu-icon-heartbeat faa-tada" style="font-size:.9em"></i><span> 恋爱小屋</span></a></li></ul></div></div></div><div id="nav-right"><div class="nav-button only-home" id="travellings_button" title="随机前往一个开往项目网站"><a class="site-page" onclick="anzhiyu.totraveling()" title="随机前往一个开往项目网站" href="javascript:void(0);" rel="external nofollow" data-pjax-state="external"><i class="anzhiyufont anzhiyu-icon-train"></i></a></div><div class="nav-button" id="randomPost_button"><a class="site-page" onclick="toRandomPost()" title="随机前往一个文章" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-dice"></i></a></div><div class="nav-button" id="search-button"><a class="site-page social-icon search" href="javascript:void(0);" rel="external nofollow noreferrer" title="搜索🔍" accesskey="s"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span> 搜索</span></a></div><input id="center-console" type="checkbox"><label class="widget" for="center-console" title="中控台" onclick="anzhiyu.switchConsole()"><i class="left"></i><i class="widget center"></i><i class="widget right"></i></label><div id="console"><div class="console-card-group-reward"><ul class="reward-all console-card"><li class="reward-item"><a href="/img/wxpay.webp" target="_blank"><img class="post-qr-code-img" alt="wechat" src="/img/wxpay.webp"></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/img/alipay.webp" target="_blank"><img class="post-qr-code-img" alt="alipay" src="/img/alipay.webp"></a><div class="post-qr-code-desc">alipay</div></li></ul></div><div class="console-card-group"><div class="console-card-group-left"><div class="console-card" id="card-newest-comments"><div class="card-content"><div class="author-content-item-tips">互动</div><span class="author-content-item-title">最新评论</span></div><div class="aside-list"><span>正在加载中...</span></div></div></div><div class="console-card-group-right"><div class="console-card tags"><div class="card-content"><div class="author-content-item-tips">兴趣点</div><span class="author-content-item-title">寻找你感兴趣的领域</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/API/" style="font-size:1.05rem;color:#637571">API<sup>43</sup></a><a href="/tags/Base64/" style="font-size:1.05rem;color:#8a0460">Base64<sup>1</sup></a><a href="/tags/Collectors/" style="font-size:1.05rem;color:#6b3641">Collectors<sup>3</sup></a><a href="/tags/Date/" style="font-size:1.05rem;color:#5e6603">Date<sup>3</sup></a><a href="/tags/Executor/" style="font-size:1.05rem;color:#abb61f">Executor<sup>9</sup></a><a href="/tags/Guava/" style="font-size:1.05rem;color:#6dc55c">Guava<sup>1</sup></a><a href="/tags/JVM/" style="font-size:1.05rem;color:#8745c2">JVM<sup>8</sup></a><a href="/tags/Java8/" style="font-size:1.05rem;color:#804042">Java8<sup>21</sup></a><a href="/tags/Java9/" style="font-size:1.05rem;color:#21b4c6">Java9<sup>21</sup></a><a href="/tags/Java%E5%B9%B6%E5%8F%91/" style="font-size:1.05rem;color:#0a3988">Java并发<sup>20</sup></a><a href="/tags/Lambda/" style="font-size:1.05rem;color:#29446d">Lambda<sup>4</sup></a><a href="/tags/Lock/" style="font-size:1.05rem;color:#afc378">Lock<sup>1</sup></a><a href="/tags/Maven/" style="font-size:1.05rem;color:#b10843">Maven<sup>1</sup></a><a href="/tags/Memcached/" style="font-size:1.05rem;color:#9663a4">Memcached<sup>23</sup></a><a href="/tags/Mongodb/" style="font-size:1.05rem;color:#b4214d">Mongodb<sup>49</sup></a><a href="/tags/Queue/" style="font-size:1.05rem;color:#220f01">Queue<sup>1</sup></a><a href="/tags/Redis/" style="font-size:1.05rem;color:#c4106c">Redis<sup>27</sup></a><a href="/tags/Stream/" style="font-size:1.05rem;color:#1f5f9f">Stream<sup>4</sup></a><a href="/tags/Thread/" style="font-size:1.05rem;color:#c3563b">Thread<sup>7</sup></a><a href="/tags/Thread-pool/" style="font-size:1.05rem;color:#1a3364">Thread pool<sup>7</sup></a><a href="/tags/forkJoinPool/" style="font-size:1.05rem;color:#1ea132">forkJoinPool<sup>2</sup></a><a href="/tags/stream/" style="font-size:1.05rem;color:#a00679">stream<sup>1</sup></a><a href="/tags/%E4%B8%93%E6%A0%8F/" style="font-size:1.05rem;color:#9e5e9b">专栏<sup>35</sup></a><a href="/tags/%E4%BA%8B%E5%8A%A1/" style="font-size:1.05rem;color:#4d47bc">事务<sup>1</sup></a><a href="/tags/%E4%BC%98%E5%8C%96/" style="font-size:1.05rem;color:#a56245">优化<sup>1</sup></a><a href="/tags/%E5%91%BD%E4%BB%A4/" style="font-size:1.05rem;color:#9c8435">命令<sup>57</sup></a><a href="/tags/%E5%AE%89%E8%A3%85/" style="font-size:1.05rem;color:#647e28">安装<sup>6</sup></a><a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size:1.05rem;color:#a192b9">工具<sup>2</sup></a><a href="/tags/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/" style="font-size:1.05rem;color:#22a370">数据类型<sup>8</sup></a><a href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" style="font-size:1.05rem;color:#6b985c">生命周期<sup>1</sup></a><a href="/tags/%E7%AE%80%E4%BB%8B/" style="font-size:1.05rem;color:#bc5f40">简介<sup>7</sup></a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size:1.05rem;color:#167366">算法<sup>10</sup></a><a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size:1.05rem;color:#aa928f">设计模式<sup>38</sup></a><a href="/tags/%E9%85%8D%E7%BD%AE/" style="font-size:1.05rem;color:#3a740b">配置<sup>2</sup></a><a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size:1.05rem;color:#75c343">面试<sup>11</sup></a></div></div><hr></div></div><div class="console-card history"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-box-archiv"></i><span>文章</span></div><div class="card-archives"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多"> <i class="anzhiyufont anzhiyu-icon-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/06/"><span class="card-archive-list-date">六月 2023</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/05/"><span class="card-archive-list-date">五月 2021</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">2</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/10/"><span class="card-archive-list-date">十月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">21</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/09/"><span class="card-archive-list-date">九月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">44</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/08/"><span class="card-archive-list-date">八月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">47</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/07/"><span class="card-archive-list-date">七月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">42</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/06/"><span class="card-archive-list-date">六月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">31</span><span>篇</span></div></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/05/"><span class="card-archive-list-date">五月 2020</span><div class="card-archive-list-count-group"><span class="card-archive-list-count">43</span><span>篇</span></div></a></li></ul></div><hr></div></div></div><div class="button-group"><div class="console-btn-item"><a class="darkmode_switchbutton" title="显示模式切换" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-moon"></i></a></div><div class="console-btn-item" id="consoleHideAside" onclick="anzhiyu.hideAsideBtn()" title="边栏显示控制"><a class="asideSwitch"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></a></div><div class="console-btn-item on" id="consoleCommentBarrage" onclick="anzhiyu.switchCommentBarrage()" title="热评开关"><a class="commentBarrage"><i class="anzhiyufont anzhiyu-icon-message"></i></a></div><div class="console-btn-item" id="consoleMusic" onclick="anzhiyu.musicToggle()" title="音乐开关"><a class="music-switch"><i class="anzhiyufont anzhiyu-icon-music"></i></a></div></div><div class="console-mask" onclick="anzhiyu.hideConsole()" href="javascript:void(0);" rel="external nofollow noreferrer"></div></div><div class="nav-button" id="nav-totop"><a class="totopbtn" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i><span id="percent" onclick="anzhiyu.scrollToDest(0,500)">0</span></a></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer" title="切换"><i class="anzhiyufont anzhiyu-icon-bars"></i></a></div></div></div></nav><div id="post-info"><div id="post-firstinfo"><div class="meta-firstline"><a class="post-meta-original">原创</a><span class="article-meta tags"></span></div></div><h1 class="post-title" itemprop="name headline">安知鱼主题标签 Tag Plugins</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="anzhiyufont anzhiyu-icon-calendar-days post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" itemprop="dateCreated datePublished" datetime="2023-06-01T07:55:44.000Z" title="发表于 2023-06-01 15:55:44">2023-06-01</time><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-history post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" itemprop="dateCreated datePublished" datetime="2023-06-01T07:55:44.000Z" title="更新于 2023-06-01 15:55:44">2023-06-01</time></span></div><div class="meta-secondline"><span class="post-meta-separator"></span><span class="post-meta-wordcount"><i class="anzhiyufont anzhiyu-icon-file-word post-meta-icon" title="文章字数"></i><span class="post-meta-label" title="文章字数">字数总计:</span><span class="word-count" title="文章字数">10.6k</span><span class="post-meta-separator"></span><i class="anzhiyufont anzhiyu-icon-clock post-meta-icon" title="阅读时长"></i><span class="post-meta-label" title="阅读时长">阅读时长:</span><span>46分钟</span></span><span class="post-meta-separator"></span><span class="post-meta-pv-cv" data-flag-title="安知鱼主题标签 Tag Plugins"><i class="anzhiyufont anzhiyu-icon-fw-eye post-meta-icon"></i><span class="post-meta-label" title="阅读量">阅读量:</span><span id="busuanzi_value_page_pv"><i class="anzhiyufont anzhiyu-icon-spinner anzhiyu-spin"></i></span></span><span class="post-meta-separator"> </span><span class="post-meta-position" title="作者IP属地为武汉"><i class="anzhiyufont anzhiyu-icon-location-dot"></i>武汉</span></div></div></div><section class="main-hero-waves-area waves-area"><svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"><defs><path id="gentle-wave" d="M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z"></path></defs><g class="parallax"><use href="#gentle-wave" x="48" y="0"></use><use href="#gentle-wave" x="48" y="3"></use><use href="#gentle-wave" x="48" y="5"></use><use href="#gentle-wave" x="48" y="7"></use></g></svg></section><div id="post-top-cover"><img class="nolazyload" id="post-top-bg" src="https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp"></div></header><main id="blog-container"><div class="layout" id="content-inner"><div id="post"><div class="post-ai-description"><div class="ai-title"><i class="anzhiyufont anzhiyu-icon-bilibili"></i><div class="ai-title-text">AI-摘要</div><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i><i class="anzhiyufont anzhiyu-icon-circle-dot" title="朗读摘要"></i><div id="ai-tag">Tianli GPT</div></div><div class="ai-explanation">AI初始化中...</div><div class="ai-btn-box"><div class="ai-btn-item">介绍自己 🙈</div><div class="ai-btn-item">生成本文简介 👋</div><div class="ai-btn-item">推荐相关文章 📖</div><div class="ai-btn-item">前往主页 🏠</div><div class="ai-btn-item" id="go-tianli-blog">前往爱发电购买</div></div><script data-pjax src="/js/anzhiyu/ai_abstract.js"></script></div><article class="post-content" id="article-container" itemscope itemtype="https://it985.github.io/posts/d50a.html"><header><h1 id="CrawlerTitle" itemprop="name headline">安知鱼主题标签 Tag Plugins</h1><span itemprop="author" itemscope itemtype="http://schema.org/Person">云少</span><time itemprop="dateCreated datePublished" datetime="2023-06-01T07:55:44.000Z" title="发表于 2023-06-01 15:55:44">2023-06-01</time><time itemprop="dateCreated datePublished" datetime="2023-06-01T07:55:44.000Z" title="更新于 2023-06-01 15:55:44">2023-06-01</time></header><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p><code>AnZhiYu主题</code>中大部分标签移植于<a target="_blank" rel="noopener external nofollow noreferrer" href="https://akilar.top/">店长</a>的<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.npmjs.com/package/hexo-butterfly-tag-plugins-plus">hexo-butterfly-tag-plugins-plus</a>，转载请注明来自<a target="_blank" rel="noopener external nofollow noreferrer" href="https://blog.anheyu.com/posts/d50a.html">安知鱼</a></p></div><h2 id="按钮-btns"><a href="#按钮-btns" class="headerlink" title="按钮 btns"></a>按钮 btns</h2><div class="tabs" id="btns"><ul class="nav-tabs"><button type="button" class="tab" data-href="btns-1">标签语法</button><button type="button" class="tab" data-href="btns-2">参数配置</button><button type="button" class="tab active" data-href="btns-3">样式预览</button><button type="button" class="tab" data-href="btns-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btns-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns 样式参数 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% cell 标题, 链接, 图片或者图标 %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btns-2"><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <code>&lt;b&gt;标题&lt;/b&gt;</code>和<code>&lt;p&gt;描述文字&lt;/p&gt;</code></li><li>布局方式：<br>默认为自动宽度，适合视野内只有一两个的情况。</li></ol><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">wide</td><td align="left">宽一点的按钮</td></tr><tr><td align="left">fill</td><td align="left">填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td align="left">center</td><td align="left">居中，按钮之间是固定间距</td></tr><tr><td align="left">around</td><td align="left">居中分散</td></tr><tr><td align="left">grid2</td><td align="left">等宽最多 2 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid3</td><td align="left">等宽最多 3 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid4</td><td align="left">等宽最多 4 列，屏幕变窄会适当减少列数</td></tr><tr><td align="left">grid5</td><td align="left">等宽最多 5 列，屏幕变窄会适当减少列数</td></tr></tbody></table></div><div class="tab-item-content active" id="btns-3"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li></ol><div class="btns circle grid5"><a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" title="xaoxuu"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787e6a5816d.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" title="xaoxuu"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787e6a5816d.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" title="xaoxuu"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787e6a5816d.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" title="xaoxuu"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787e6a5816d.png">xaoxuu</a> <a class="button no-text-decoration" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" title="xaoxuu"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787e6a5816d.png">xaoxuu</a></div><ol start="2"><li>或者含有图标的按钮：</li></ol><div class="btns rounded grid5"><a class="button no-text-decoration" href="/" title="下载源码"><i class="anzhiyufont anzhiyu-icon-bolt"></i>下载源码</a> <a class="button no-text-decoration" href="/" title="查看文档"><i class="anzhiyufont anzhiyu-icon-book"></i>查看文档</a></div><ol start="3"><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li></ol><div class="btns circle center grid5"><a target="_blank" rel="noopener external nofollow noreferrer" href="https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1" class="no-text-decoration"><i class="anzhiyufont anzhiyu-icon-heartbeat"></i> <b>心率管家</b><p class="p red">专业版</p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png"> </a><a target="_blank" rel="noopener external nofollow noreferrer" href="https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1" class="no-text-decoration"><i class="anzhiyufont anzhiyu-icon-heartbeat"></i> <b>心率管家</b><p class="p green">免费版</p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png"></a></div></div><div class="tab-item-content" id="btns-4"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle grid5 %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% cell xaoxuu, https://xaoxuu.com, https://bu.dusays.com/2023/06/01/64787e6a5816d.png %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>或者含有图标的按钮：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns rounded grid5 %&#125;</span><br><span class="line">&#123;% cell 下载源码, /, anzhiyufont anzhiyu-icon-bolt %&#125;</span><br><span class="line">&#123;% cell 查看文档, /, anzhiyufont anzhiyu-icon-book %&#125;</span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btns circle center grid5 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1&#x27;</span> <span class="attr">class</span>=<span class="string">&quot;no-text-decoration&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;anzhiyufont anzhiyu-icon-heartbeat&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">&#123;% p red, 专业版 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64787e2a1347c.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&#x27;https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1&#x27;</span> <span class="attr">class</span>=<span class="string">&quot;no-text-decoration&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">&#x27;anzhiyufont anzhiyu-icon-heartbeat&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">b</span>&gt;</span></span>心率管家<span class="language-xml"><span class="tag">&lt;/<span class="name">b</span>&gt;</span></span></span><br><span class="line">&#123;% p green, 免费版 %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64787e515e261.png&#x27;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">&#123;% endbtns %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="按钮-btn"><a href="#按钮-btn" class="headerlink" title="按钮 btn"></a>按钮 btn</h2><div class="tabs" id="btn"><ul class="nav-tabs"><button type="button" class="tab" data-href="btn-1">标签语法</button><button type="button" class="tab" data-href="btn-2">参数配置</button><button type="button" class="tab active" data-href="btn-3">样式预览</button><button type="button" class="tab" data-href="btn-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %&#125;</span><br><span class="line"></span><br><span class="line">[url] : 链接</span><br><span class="line">[text] : 按钮文字</span><br><span class="line">[icon] : [可选] 图标</span><br><span class="line">[color] : [可选] 按钮背景顔色(默认 style 时）</span><br><span class="line">按钮字体和边框顔色(outline 时)</span><br><span class="line">default/blue/pink/red/purple/orange/green</span><br><span class="line">[style] : [可选] 按钮样式 默认实心</span><br><span class="line">outline/留空</span><br><span class="line">[layout] : [可选] 按钮佈局 默认为 line</span><br><span class="line">block/留空</span><br><span class="line">[position] : [可选] 按钮位置 前提是设置了 layout 为 block 默认为左边</span><br><span class="line">center/right/留空</span><br><span class="line">[size] : [可选] 按钮大小</span><br><span class="line">larger/留空</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btn-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">url</td><td align="left">链接</td></tr><tr><td align="left">text</td><td align="left">按钮文字</td></tr><tr><td align="left">icon</td><td align="left">[可选] 图标，如果开启了 <code>fontawesome</code>可以使用 fontawesome 的图标，否则只能使用默内置图标</td></tr><tr><td align="left">color</td><td align="left">[可选] 按钮背景顔色(默认 style 时）按钮字体和边框顔色(outline 时)default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr><tr><td align="left">style</td><td align="left">[可选] 按钮样式 默认实心数，outline&#x2F;留空</td></tr><tr><td align="left">layout</td><td align="left">[可选] 按钮佈局 默认为 line block&#x2F;留空</td></tr><tr><td align="left">position</td><td align="left">[可选] 按钮位置 前提是设置了 layout 为 block 默认为左边 center&#x2F;right&#x2F;留空数</td></tr><tr><td align="left">size</td><td align="left">[可选] 按钮大小 larger&#x2F;留空</td></tr></tbody></table></div><div class="tab-item-content active" id="btn-3"><ol><li>一组按钮</li></ol><p>This is my website, click the button <a class="btn-anzhiyu" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu outline" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu outline" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br>This is my website, click the button <a class="btn-anzhiyu larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p><ol start="2"><li>调整位置&#x2F;大小</li></ol><p><a class="btn-anzhiyu block" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br><a class="btn-anzhiyu block center larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a><br><a class="btn-anzhiyu block right outline larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></p><ol start="3"><li>more than one button in center</li></ol><span><a class="btn-anzhiyu larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu blue larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu pink larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu red larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu purple larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu orange larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu green larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></span><ol start="4"><li>居中按钮</li></ol><div class="btn-center"><a class="btn-anzhiyu outline larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline blue larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline pink larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline red larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline purple larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline orange larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a> <a class="btn-anzhiyu outline green larger" target="_blank" rel="noopener" href="https://anheyu.com/" title="AnZhiYu"><i class="anzhiyufont anzhiyu-icon-circle-arrow-right"></i><span>AnZhiYu</span></a></div></div><div class="tab-item-content" id="btn-4"><ol><li>一组按钮</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline %&#125;</span><br><span class="line">This is my website, click the button &#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>调整位置&#x2F;大小</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block center larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,block right outline larger %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>more than one button in center</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br></pre></td></tr></table></figure><ol start="4"><li>居中按钮</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-center&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline blue larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline pink larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline red larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline purple larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline orange larger %&#125;</span><br><span class="line">&#123;% btn &#x27;https://anheyu.com/&#x27;,AnZhiYu,anzhiyufont anzhiyu-icon-circle-arrow-right,outline green larger %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="网站卡片-sites"><a href="#网站卡片-sites" class="headerlink" title="网站卡片 sites"></a>网站卡片 sites</h2><div class="tabs" id="site"><ul class="nav-tabs"><button type="button" class="tab" data-href="site-1">标签语法</button><button type="button" class="tab active" data-href="site-2">样式预览</button><button type="button" class="tab" data-href="site-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="site-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="site-2"><div class="site-card-group"><a class="site-card" target="_blank" rel="noopener external nofollow noreferrer" href="https://xaoxuu.com" data-title="简约风格"><div class="wrapper cover"><img class="cover fadeIn" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478965ce6557.webp"></div><div class="info"><img class="flink-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png"><span class="site-title">xaoxuu</span></div></a><a class="site-card" target="_blank" rel="noopener external nofollow noreferrer" href="https://colsrch.top" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"></div><div class="info"><img class="flink-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg"><span class="site-title">Colsrch</span></div></a><a class="site-card" target="_blank" rel="noopener external nofollow noreferrer" href="https://linhk1606.github.io" data-title="这是一段关于这个网站的描述文字"><div class="wrapper cover"><img class="cover fadeIn" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478963584621.png"></div><div class="info"><img class="flink-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478968743368.png"><span class="site-title">Linhk1606</span></div></a></div></div><div class="tab-item-content" id="site-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;% sitegroup %&#125;</span><br><span class="line">&#123;% site xaoxuu, url=https://xaoxuu.com, screenshot=https://bu.dusays.com/2023/06/01/6478965ce6557.webp, avatar=https://cdn1.tianli0.top/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %&#125;</span><br><span class="line">&#123;% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn1.tianli0.top/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://bu.dusays.com/2023/06/01/6478963584621.png, avatar=https://bu.dusays.com/2023/06/01/6478968743368.png, description=这是一段关于这个网站的描述文字 %&#125;</span><br><span class="line">&#123;% endsitegroup %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="单张图片-image"><a href="#单张图片-image" class="headerlink" title="单张图片 image"></a>单张图片 image</h2><div class="tabs" id="image"><ul class="nav-tabs"><button type="button" class="tab" data-href="image-1">标签语法</button><button type="button" class="tab" data-href="image-2">参数配置</button><button type="button" class="tab active" data-href="image-3">样式预览</button><button type="button" class="tab" data-href="image-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="image-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="image-2"><ol><li>图片宽度高度：width&#x3D;300px, height&#x3D;32px</li><li>图片描述：alt&#x3D;图片描述（butterfly 需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg&#x3D;#f2f2f2</li></ol></div><div class="tab-item-content active" id="image-3"><ol start="4"><li>添加描述：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。"></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div><ol start="2"><li>指定宽度：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" style="width:400px"></div></div><ol start="3"><li>指定宽度并添加描述：</li></ol><div class="img-wrap"><div class="img-bg"><img class="img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px"></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div><ol start="4"><li>设置占位背景色：</li></ol><div class="img-wrap"><div class="img-bg" style="background:#1d0c04"><img class="img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478937d7de6f.webp" alt="优化不同宽度浏览的观感" style="width:400px"></div><span class="image-caption">优化不同宽度浏览的观感</span></div></div><div class="tab-item-content" id="image-4"><ol><li>添加描述：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>指定宽度：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>指定宽度并添加描述：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>设置占位背景色：</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% image https://bu.dusays.com/2023/06/01/6478937d7de6f.webp, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="inlineImg-行内图片"><a href="#inlineImg-行内图片" class="headerlink" title="inlineImg 行内图片"></a>inlineImg 行内图片</h2><div class="tabs" id="inlineimg"><ul class="nav-tabs"><button type="button" class="tab" data-href="inlineimg-1">标签语法</button><button type="button" class="tab" data-href="inlineimg-2">参数配置</button><button type="button" class="tab active" data-href="inlineimg-3">样式预览</button><button type="button" class="tab" data-href="inlineimg-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimg-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineImg [src] [height] %&#125;</span><br><span class="line"></span><br><span class="line">[src] : 图片链接</span><br><span class="line">[height] ： 图片高度限制【可选】</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="inlineimg-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">src</td><td align="left">图片链接</td></tr><tr><td align="left">height</td><td align="left">图片高度限制【可选】</td></tr></tbody></table></div><div class="tab-item-content active" id="inlineimg-3"><p>你看我长得漂亮不</p><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787ded2ca1c.webp"></p><p>我觉得很漂亮 <img class="inline-img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64787da5251b3.png" style="height:150px"></p></div><div class="tab-item-content" id="inlineimg-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">你看我长得漂亮不</span><br><span class="line"></span><br><span class="line">![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)</span><br><span class="line"></span><br><span class="line">我觉得很漂亮 &#123;% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 150px %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="行内图片-inlineimage"><a href="#行内图片-inlineimage" class="headerlink" title="行内图片 inlineimage"></a>行内图片 inlineimage</h2><div class="tabs" id="inlineimage"><ul class="nav-tabs"><button type="button" class="tab" data-href="inlineimage-1">标签语法</button><button type="button" class="tab" data-href="inlineimage-2">参数配置</button><button type="button" class="tab active" data-href="inlineimage-3">样式预览</button><button type="button" class="tab" data-href="inlineimage-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="inlineimage-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% inlineimage 图片链接, height=高度（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="inlineimage-2"><ol><li>高度：height&#x3D;20px</li></ol></div><div class="tab-item-content active" id="inlineimage-3"><p>这是 <img no-lazy class="inline" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/647895232e5d5.webp" style="height:1.5em"> 一段话。</p><p>这又是 <img no-lazy class="inline" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2022/05/19/6285328a83ca7.gif" style="height:40px"> 一段话。</p></div><div class="tab-item-content" id="inlineimage-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">这是 &#123;% inlineimage https://bu.dusays.com/2023/06/01/647895232e5d5.webp %&#125; 一段话。</span><br><span class="line"></span><br><span class="line">这又是 &#123;% inlineimage https://bu.dusays.com/2022/05/19/6285328a83ca7.gif, height=40px %&#125; 一段话。</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="label-标签"><a href="#label-标签" class="headerlink" title="label 标签"></a>label 标签</h2><div class="tabs" id="label"><ul class="nav-tabs"><button type="button" class="tab" data-href="label-1">标签语法</button><button type="button" class="tab" data-href="label-2">参数配置</button><button type="button" class="tab active" data-href="label-3">样式预览</button><button type="button" class="tab" data-href="label-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% label text color %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="label-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">text</td><td align="left">文字</td></tr><tr><td align="left">color</td><td align="left">【可选】背景颜色，默认为 default，default&#x2F;blue&#x2F;pink&#x2F;red&#x2F;purple&#x2F;orange&#x2F;green</td></tr></tbody></table></div><div class="tab-item-content active" id="label-3"><p>臣亮言：<mark class="hl-label default">先帝</mark> 创业未半，而<mark class="hl-label blue">中道崩殂</mark> 。今天下三分，<mark class="hl-label pink">益州疲敝</mark> ，此诚<mark class="hl-label red">危急存亡之秋</mark> 也！然侍衞之臣，不懈于内；<mark class="hl-label purple">忠志之士</mark> ，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。<br>宫中、府中，俱为一体；陟罚臧否，不宜异同。若有<mark class="hl-label orange">作奸</mark> 、<mark class="hl-label green">犯科</mark> ，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</p></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">臣亮言：&#123;% label 先帝 %&#125;创业未半，而&#123;% label 中道崩殂 blue %&#125;。今天下三分，&#123;% label 益州疲敝 pink %&#125;，此诚&#123;% label 危急存亡之秋 red %&#125;也！然侍衞之臣，不懈于内；&#123;% label 忠志之士 purple %&#125;，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。</span><br><span class="line">宫中、府中，俱为一体；陟罚臧否，不宜异同。若有&#123;% label 作奸 orange %&#125;、&#123;% label 犯科 green %&#125;，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="timeline"><a href="#timeline" class="headerlink" title="timeline"></a>timeline</h2><div class="tabs" id="timeline"><ul class="nav-tabs"><button type="button" class="tab" data-href="timeline-1">标签语法</button><button type="button" class="tab" data-href="timeline-2">参数配置</button><button type="button" class="tab active" data-href="timeline-3">样式预览</button><button type="button" class="tab" data-href="timeline-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="timeline-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline title,color %&#125;</span><br><span class="line"></span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line">&lt;!-- timeline title --&gt;</span><br><span class="line"></span><br><span class="line">xxxxx</span><br><span class="line"></span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="timeline-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">title</td><td align="left">标题&#x2F;时间线</td></tr><tr><td align="left">color</td><td align="left">timeline 颜色，default(留空) &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green</td></tr></tbody></table></div><div class="tab-item-content active" id="timeline-3"><ol><li><p>默认颜色</p><div class="timeline undefined"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>blue</p><div class="timeline blue"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>pink</p><div class="timeline pink"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>red</p><div class="timeline red"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>purple</p><div class="timeline purple"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>orange</p><div class="timeline orange"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li><li><p>green</p><div class="timeline green"><div class="timeline-item headline"><div class="timeline-item-title"><div class="item-circle"><p>2022</p></div></div></div><div class="timeline-item"><div class="timeline-item-title"><div class="item-circle"><p>01-02</p></div></div><div class="timeline-item-content"><p>这是测试页面</p></div></div></div></li></ol></div><div class="tab-item-content" id="timeline-4"><ol><li>默认颜色</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022 %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li>blue</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,blue %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>pink</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,pink %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li>red</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,red %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li>purple</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,purple %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="6"><li>orange</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,orange %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure><ol start="7"><li>green</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% timeline 2022,green %&#125;</span><br><span class="line">&lt;!-- timeline 01-02 --&gt;</span><br><span class="line"></span><br><span class="line">这是测试页面</span><br><span class="line">&lt;!-- endtimeline --&gt;</span><br><span class="line"></span><br><span class="line">&#123;% endtimeline %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="flink-友链标签"><a href="#flink-友链标签" class="headerlink" title="flink 友链标签"></a>flink 友链标签</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>可在任何界面插入类似<code>友情链接</code>列表效果，内容格式与友情链接界面一样，支持 <code>yml 格式</code>,注意<code>yml数据</code>具有格式要求，请注意格式对齐，防止被编辑器格式化导致格式错误从而报错。</p></div><div class="tabs" id="btn"><ul class="nav-tabs"><button type="button" class="tab" data-href="btn-1">标签语法</button><button type="button" class="tab" data-href="btn-2">参数配置</button><button type="button" class="tab active" data-href="btn-3">样式预览</button><button type="button" class="tab" data-href="btn-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="btn-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% flink %&#125;</span><br><span class="line">xxxxxx</span><br><span class="line">&#123;% endflink %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="btn-2"><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">class_name</td><td align="left">h2标题</td></tr><tr><td align="left">flink_style</td><td align="left">【可选】友链样式，默认为 flexcard，flexcard&#x2F;anzhiyu</td></tr><tr><td align="left">link_list</td><td align="left">【可选】友链样式，默认为 flexcard，flexcard&#x2F;anzhiyu</td></tr></tbody></table></div><div class="tab-item-content active" id="btn-3"><div class="flink"><div class="flink-name">推荐博客</div><div class="flink-list"><div class="flexcard-flink-list"><a href="https://anheyu.com/" rel="external nofollow noreferrer" title="安知鱼" target="_blank" class="flink-list-card cf-friends-link"><div class="wrapper cover"><img class="no-lightbox cover fadeIn" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/anheyu.com.jpg" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="安知鱼"></div><div class="info"><img class="no-lightbox cf-friends-avatar flink-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="安知鱼"> <span class="flink-sitename cf-friends-name">安知鱼</span></div></a></div></div><div class="flink-name">网站</div><div class="flink-desc">值得推荐的网站</div><div class="flink-list"><div class="anzhiyu-flink-list"><div class="flink-list-item"><a href="https://www.youtube.com/" rel="external nofollow noreferrer" title="Youtube" class="cf-friends-link" target="_blank"><div class="flink-item-icon"><img class="no-lightbox cf-friends-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="Youtube"></div><div class="flink-item-info"><div class="flink-item-name">Youtube</div><div class="flink-item-desc" title="视频网站">视频网站</div></div></a></div><div class="flink-list-item"><a href="https://www.weibo.com/" rel="external nofollow noreferrer" title="Weibo" class="cf-friends-link" target="_blank"><div class="flink-item-icon"><img class="no-lightbox cf-friends-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="Weibo"></div><div class="flink-item-info"><div class="flink-item-name">Weibo</div><div class="flink-item-desc" title="中国最大社交分享平台">中国最大社交分享平台</div></div></a></div><div class="flink-list-item"><a href="https://twitter.com/" rel="external nofollow noreferrer" title="Twitter" class="cf-friends-link" target="_blank"><div class="flink-item-icon"><img class="no-lightbox cf-friends-avatar" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="Twitter"></div><div class="flink-item-info"><div class="flink-item-name">Twitter</div><div class="flink-item-desc" title="社交分享平台">社交分享平台</div></div></a></div></div></div></div></div><div class="tab-item-content" id="btn-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">&#123;% flink %&#125;</span><br><span class="line"><span class="bullet">-</span> class<span class="emphasis">_name: 推荐博客</span></span><br><span class="line"><span class="emphasis">  flink_</span>style: flexcard</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: 安知鱼</span></span><br><span class="line"><span class="emphasis">      link: https://anheyu.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://img02.anheyu.com/adminuploads/1/2022/09/15/63232b7d91d22.jpg</span></span><br><span class="line"><span class="emphasis">      descr: 生活明朗，万物可爱</span></span><br><span class="line"><span class="emphasis">      siteshot: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/anheyu.com.jpg</span></span><br><span class="line"><span class="emphasis"></span></span><br><span class="line"><span class="emphasis">- class_</span>name: 网站</span><br><span class="line">  class<span class="emphasis">_desc: 值得推荐的网站</span></span><br><span class="line"><span class="emphasis">  flink_</span>style: anzhiyu</span><br><span class="line">  link<span class="emphasis">_list:</span></span><br><span class="line"><span class="emphasis">    - name: Youtube</span></span><br><span class="line"><span class="emphasis">      link: https://www.youtube.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png</span></span><br><span class="line"><span class="emphasis">      descr: 视频网站</span></span><br><span class="line"><span class="emphasis">    - name: Weibo</span></span><br><span class="line"><span class="emphasis">      link: https://www.weibo.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png</span></span><br><span class="line"><span class="emphasis">      descr: 中国最大社交分享平台</span></span><br><span class="line"><span class="emphasis">    - name: Twitter</span></span><br><span class="line"><span class="emphasis">      link: https://twitter.com/</span></span><br><span class="line"><span class="emphasis">      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png</span></span><br><span class="line"><span class="emphasis">      descr: 社交分享平台</span></span><br><span class="line"><span class="emphasis">&#123;% endflink %&#125;</span></span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="mermaid-图"><a href="#mermaid-图" class="headerlink" title="mermaid 图"></a>mermaid 图</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>使用<code>mermaid标签</code>可以绘制Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和Pie Chart（圆形图），具体可以查看<a target="_blank" rel="noopener external nofollow noreferrer" href="https://mermaid.js.org/#/">mermaid文档</a></p></div><p>修改 <code>主题配置文件</code></p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># mermaid</span></span><br><span class="line"><span class="comment"># see https://github.com/mermaid-js/mermaid</span></span><br><span class="line"><span class="attr">mermaid:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="comment"># built-in themes: default/forest/dark/neutral</span></span><br><span class="line">  <span class="attr">theme:</span></span><br><span class="line">    <span class="attr">light:</span> <span class="string">default</span></span><br><span class="line">    <span class="attr">dark:</span> <span class="string">dark</span></span><br></pre></td></tr></table></figure><div class="tabs" id="mermaid"><ul class="nav-tabs"><button type="button" class="tab" data-href="mermaid-1">标签语法</button><button type="button" class="tab active" data-href="mermaid-2">样式预览</button><button type="button" class="tab" data-href="mermaid-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="mermaid-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">内容</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="mermaid-2"><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/647889d3a16f8.png" alt="mermaid"></p></div><div class="tab-item-content" id="mermaid-3"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% mermaid %&#125;</span><br><span class="line">pie</span><br><span class="line">    title Key elements in Product X</span><br><span class="line">    &quot;Calcium&quot; : 42.96</span><br><span class="line">    &quot;Potassium&quot; : 50.05</span><br><span class="line">    &quot;Magnesium&quot; : 10.01</span><br><span class="line">    &quot;Iron&quot; :  5</span><br><span class="line">&#123;% endmermaid %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="复选列表-checkbox"><a href="#复选列表-checkbox" class="headerlink" title="复选列表 checkbox"></a>复选列表 checkbox</h2><div class="tabs" id="checkbox"><ul class="nav-tabs"><button type="button" class="tab" data-href="checkbox-1">标签语法</button><button type="button" class="tab" data-href="checkbox-2">配置参数</button><button type="button" class="tab active" data-href="checkbox-3">样式预览</button><button type="button" class="tab" data-href="checkbox-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="checkbox-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="checkbox-2"><ol><li>样式: plus, minus, times</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>选中状态: checked</li></ol></div><div class="tab-item-content active" id="checkbox-3"><div class="checkbox"><input type="checkbox"><p>纯文本测试</p></div><div class="checkbox checked"><input type="checkbox" checked><p>支持简单的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p></div><div class="checkbox red"><input type="checkbox"><p>支持自定义颜色</p></div><div class="checkbox green checked"><input type="checkbox" checked><p>绿色 + 默认选中</p></div><div class="checkbox yellow checked"><input type="checkbox" checked><p>黄色 + 默认选中</p></div><div class="checkbox cyan checked"><input type="checkbox" checked><p>青色 + 默认选中</p></div><div class="checkbox blue checked"><input type="checkbox" checked><p>蓝色 + 默认选中</p></div><div class="checkbox plus green checked"><input type="checkbox" checked><p>增加</p></div><div class="checkbox minus yellow checked"><input type="checkbox" checked><p>减少</p></div><div class="checkbox times red checked"><input type="checkbox" checked><p>叉</p></div></div><div class="tab-item-content" id="checkbox-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% checkbox 纯文本测试 %&#125;</span><br><span class="line">&#123;% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% checkbox red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% checkbox green checked, 绿色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox yellow checked, 黄色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox cyan checked, 青色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox blue checked, 蓝色 + 默认选中 %&#125;</span><br><span class="line">&#123;% checkbox plus green checked, 增加 %&#125;</span><br><span class="line">&#123;% checkbox minus yellow checked, 减少 %&#125;</span><br><span class="line">&#123;% checkbox times red checked, 叉 %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="dogeplayer-多吉云播放器"><a href="#dogeplayer-多吉云播放器" class="headerlink" title="dogeplayer 多吉云播放器"></a>dogeplayer 多吉云播放器</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>快捷引入<a target="_blank" rel="noopener external nofollow noreferrer" href="https://console.dogecloud.com/vod/overview">多吉云视频</a></p></div><div class="tabs" id="label"><ul class="nav-tabs"><button type="button" class="tab" data-href="label-1">标签语法</button><button type="button" class="tab" data-href="label-2">参数配置</button><button type="button" class="tab active" data-href="label-3">样式预览</button><button type="button" class="tab" data-href="label-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="label-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% dogeplayer 4945 ebb742fd1f0b5a7b %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="label-2"><p>获取<code>userId</code>与<code>vcode</code></p><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788b5bad729.webp"></p><table><thead><tr><th align="left">参数</th><th align="left">含义</th></tr></thead><tbody><tr><td align="left">userId</td><td align="left">多吉云userId</td></tr><tr><td align="left">vcode</td><td align="left">视频vcode</td></tr></tbody></table></div><div class="tab-item-content active" id="label-3"><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788c12883b8.webp"></p></div><div class="tab-item-content" id="label-4"><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% dogeplayer 4945 ebb742fd1f0b5a7b %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="折叠框-folding"><a href="#折叠框-folding" class="headerlink" title="折叠框 folding"></a>折叠框 folding</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>折叠框folding</p></div><div class="tabs" id="folding"><ul class="nav-tabs"><button type="button" class="tab" data-href="folding-1">标签语法</button><button type="button" class="tab" data-href="folding-2">配置参数</button><button type="button" class="tab active" data-href="folding-3">样式预览</button><button type="button" class="tab" data-href="folding-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="folding-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 参数（可选）, 标题 %&#125;</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="folding-2"><ol><li>颜色：blue, cyan, green, yellow, red</li><li>状态：状态填写 open 代表默认打开。</li></ol></div><div class="tab-item-content active" id="folding-3"><details class="folding-tag"><summary>查看图片测试</summary><div class="content"><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788d71c832d.webp"></p></div></details><details class="folding-tag" cyan open><summary>查看默认打开的折叠框</summary><div class="content"><p>这是一个默认打开的折叠框。</p></div></details><details class="folding-tag" green><summary>查看代码测试</summary><div class="content"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br></pre></td></tr></table></figure></div></details><details class="folding-tag" yellow><summary>查看列表测试</summary><div class="content"><ul><li>haha</li><li>hehe</li></ul></div></details><details class="folding-tag" red><summary>查看嵌套测试</summary><div class="content"><details class="folding-tag" blue><summary>查看嵌套测试2</summary><div class="content"><details class="folding-tag"><summary>查看嵌套测试3</summary><div class="content"><p>hahaha <span><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788cd5a356b.png" style="height:24px"></span></p></div></details></div></details></div></details></div><div class="tab-item-content" id="folding-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">&#123;% folding 查看图片测试 %&#125;</span><br><span class="line"></span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/64788d71c832d.webp</span>)</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding cyan open, 查看默认打开的折叠框 %&#125;</span><br><span class="line"></span><br><span class="line">这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding green, 查看代码测试 %&#125;</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding yellow, 查看列表测试 %&#125;</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding red, 查看嵌套测试 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding blue, 查看嵌套测试2 %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% folding 查看嵌套测试3 %&#125;</span><br><span class="line"></span><br><span class="line">hahaha <span class="language-xml"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#x27;https://bu.dusays.com/2023/06/01/64788cd5a356b.png&#x27;</span> <span class="attr">style</span>=<span class="string">&#x27;height:24px&#x27;</span>&gt;</span></span><span class="language-xml"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% endfolding %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="Gallery-相册图库"><a href="#Gallery-相册图库" class="headerlink" title="Gallery 相册图库"></a>Gallery 相册图库</h2><p>一个图库集合。</p><div class="tabs" id="gallery"><ul class="nav-tabs"><button type="button" class="tab" data-href="gallery-1">标签语法</button><button type="button" class="tab" data-href="gallery-2">参数配置</button><button type="button" class="tab active" data-href="gallery-3">样式预览</button><button type="button" class="tab" data-href="gallery-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="gallery-1"><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line">&#123;% galleryGroup name description link img-url %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p></li></ol><div class="tabs" id="gallery相册"><ul class="nav-tabs"><button type="button" class="tab active" data-href="gallery相册-1">本地</button><button type="button" class="tab" data-href="gallery相册-2">远程</button></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,220,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table></div><div class="tab-item-content" id="gallery相册-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,[link],[lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>url</td><td>【必须】 识别词</td></tr><tr><td>link</td><td>【必须】远程的 json 链接</td></tr><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><blockquote><p>远程链接 Json 的例子</p></blockquote><p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;这是title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><blockquote><p>示例</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,https://xxxx.com/sss.json %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,220,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="tab-item-content" id="gallery-2"><ul><li><p>gallerygroup 相册图库</p><table><thead><tr><th align="left">参数名</th><th align="left">释义</th></tr></thead><tbody><tr><td align="left">name</td><td align="left">图库名字</td></tr><tr><td align="left">description</td><td align="left">图库描述</td></tr><tr><td align="left">link</td><td align="left">链接到对应相册的地址</td></tr><tr><td align="left">img-url</td><td align="left">图库封面</td></tr></tbody></table></li></ul><div class="note info flat"><p>思维拓展一下，相册图库的实质其实就是个快捷方式，可以自定义添加描述、封面、链接。那么我们未必要把它当做一个相册，完全可以作为一个链接卡片，链接到视频、QQ、友链都是不错的选择。</p></div><ul><li>gallery 相册<br>区别于旧版的 Gallery 相册,新的 Gallery 相册会自动根据图片长度进行排版，书写也更加方便，与 markdown 格式一样。可根据需要插入到相应的 md。无需再自己配置长宽。<strong>建议在粘贴时故意使用长短、大小、横竖不一的图片</strong>，会有更好的效果。（尺寸完全相同的图片只会平铺输出，效果很糟糕）</li></ul><div class="tabs" id="gallery相册参数"><ul class="nav-tabs"><button type="button" class="tab active" data-href="gallery相册参数-1">本地</button><button type="button" class="tab" data-href="gallery相册参数-2">远程</button></ul><div class="tab-contents"><div class="tab-item-content active" id="gallery相册参数-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,220,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery true,,10 %&#125;</span><br><span class="line">markdown 图片格式</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table></div><div class="tab-item-content" id="gallery相册参数-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,[link],[lazyload],[rowHeight],[limit] %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure><table><thead><tr><th>参数名</th><th>释义</th></tr></thead><tbody><tr><td>url</td><td>【必须】 识别词</td></tr><tr><td>link</td><td>【必须】远程的 json 链接</td></tr><tr><td>lazyload</td><td>【可选】点击按钮加载更多图片，填写 true&#x2F;false。默认为 <code>false</code>。</td></tr><tr><td>rowHeight</td><td>【可选】图片显示的高度，如果需要一行显示更多的图片，可设置更小的数字。默认为 <code>220</code>。</td></tr><tr><td>limit</td><td>【可选】每次加载多少张照片。默认为 <code>10</code>。</td></tr></tbody></table><blockquote><p>远程链接 Json 的例子</p></blockquote><p>有三个参数，<code>url</code>是必须存在的，<code>alt</code> 和 <code>title</code> 可有，也可没有。</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">[</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0556.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;title&quot;</span><span class="punctuation">:</span> <span class="string">&quot;这是title&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0472.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;IMG_0472.jpg&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0453.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;url&quot;</span><span class="punctuation">:</span> <span class="string">&quot;https://cdn1.tianli0.top/gh/jerryc127/CDN/img/IMG_0931.jpg&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;alt&quot;</span><span class="punctuation">:</span> <span class="string">&quot;&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span></span><br><span class="line"><span class="punctuation">]</span></span><br></pre></td></tr></table></figure><blockquote><p>示例</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery url,https://xxxx.com/sss.json %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,220,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br><span class="line"></span><br><span class="line">&#123;% gallery url,https://xxxx.com/sss.json,true,,10 %&#125;</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></div><div class="tab-item-content active" id="gallery-3"><ul><li>gallerygroup 相册图库</li></ul><div class="gallery-group-main"><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788f24d05bd.webp" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">MC</div><p>在Rikkaの六花服务器里留下的足迹</p><a href="/wordScenery/"></a></figcaption></figure><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788f456fc3d.webp" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">Gundam</div><p>哦咧哇gundam哒！</p><a href="/thousand/"></a></figcaption></figure><figure class="gallery-group"><img class="gallery-group-img no-lightbox" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp" alt="Group Image Gallery"><figcaption><div class="gallery-group-name">I-am-Akilar</div><p>某种意义上也算自拍吧</p><a href="/wallpaper/"></a></figcaption></figure></div><ul><li>gallery 相册</li></ul><div class="gallery"><div class="fj-gallery page_img_lazyload lazyload btn_album_detail_lazyload data" data-rowheight="220" data-limit="2"><span class="gallery-data">[{"url":"https://bu.dusays.com/2023/06/01/647896b15759c.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896cabde59.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg","alt":""},{"url":"https://bu.dusays.com/2023/06/01/647896ed810b3.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]</span></div><button class="gallery-load-more" style="opacity:0"><span>加载更多</span> <i class="anzhiyufont anzhiyu-icon-arrow-down"></i></button></div></div><div class="tab-item-content" id="gallery-4"><div class="note info flat"><p>对于很多同学提问的<code>gallerygroup</code>和<code>gallery</code>相册页的链接问题。这里说下我个人的使用习惯。<br>一般使用相册图库的话，可以在导航栏加一个 gallery 的 page(<strong>使用指令<code>hexo new page gallery</code>添加</strong>)，里面放相册图库作为封面。然后在<code>[Blogroot]/source/gallery/</code>下面建立相应的文件夹，例如若按照这里的示例，若欲使用<code>/gallery/MC/</code>路径访问 MC 相册，则需要新建<code>[Blogroot]/source/gallery/MC/index.md</code>，并在里面填入<code>gallery</code>相册内容。</p><p>注意 ⚠️：本站相册集为单独优化，可参考<a target="_blank" rel="noopener external nofollow noreferrer" href="https://anheyu.com/posts/220c.html">配置相册页面</a>。</p></div><ol><li><p>gallerygroup 相册图库</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;gallery-group-main&quot;</span>&gt;</span></span></span><br><span class="line"> &#123;% galleryGroup MC 在Rikkaの六花服务器里留下的足迹 &#x27;/wordScenery/&#x27; https://bu.dusays.com/2023/06/01/64788f24d05bd.webp %&#125;</span><br><span class="line"> &#123;% galleryGroup Gundam 哦咧哇gundam哒！ &#x27;/thousand/&#x27; https://bu.dusays.com/2023/06/01/64788f456fc3d.webp %&#125;</span><br><span class="line"> &#123;% galleryGroup I-am-Akilar 某种意义上也算自拍吧 &#x27;/wallpaper/&#x27; https://bu.dusays.com/2023/06/01/64788f83e5fa1.webp %&#125;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></li><li><p>gallery 相册</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% gallery true,,2 %&#125;</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896b15759c.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896cabde59.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647896eb0f3ea.jpg</span>)</span><br><span class="line">![](<span class="link">https://bu.dusays.com/2023/06/01/647890012b1ec.webp</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg</span>)</span><br><span class="line">![](<span class="link">https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg</span>)</span><br><span class="line">&#123;% endgallery %&#125;</span><br></pre></td></tr></table></figure></li></ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="tag-hide"><a href="#tag-hide" class="headerlink" title="tag-hide"></a>tag-hide</h2><div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>如果你想把一些文字、内容隐藏起来，并提供按钮让用户点击显示。可以使用这个标签外挂。<br>请注意，tag-hide内的标签外挂content内都不建议有h1 - h6 等标题。因为Toc会把隐藏内容标题也显示出来，而且当滚动屏幕时，如果隐藏内容没有显示出来，会导致Toc的滚动出现异常。</p></div><div class="tabs" id="tag-hide"><ul class="nav-tabs"><button type="button" class="tab active" data-href="tag-hide-1">inline</button><button type="button" class="tab" data-href="tag-hide-2">Block</button><button type="button" class="tab" data-href="tag-hide-3">Toggle</button></ul><div class="tab-contents"><div class="tab-item-content active" id="tag-hide-1"><p><code>inline</code> 在文本里面添加按钮隐藏内容，只限文字</p><p>( content不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideInline content,display,bg,color %&#125;</span><br></pre></td></tr></table></figure><ul><li><p>content: 文本内容</p></li><li><p>display: 按钮显示的文字(可选)</p></li><li><p>bg: 按钮的背景颜色(可选)</p></li><li><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">哪个英文字母最酷？ &#123;% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %&#125;</span><br><span class="line"></span><br><span class="line">门里站着一个人? &#123;% hideInline 闪 %&#125;</span><br></pre></td></tr></table></figure><p>哪个英文字母最酷？ <span class="hide-inline"><button type="button" class="hide-button" style="background-color:#ff7242;color:#fff">查看答案<br></button><span class="hide-content">因为西装裤(C装酷)</span></span></p><p>门里站着一个人? <span class="hide-inline"><button type="button" class="hide-button">Click<br></button><span class="hide-content">闪</span></span></p></div><div class="tab-item-content" id="tag-hide-2"><p><code>block</code>独立的block隐藏内容，可以隐藏很多内容，包括图片，代码块等等</p><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideBlock display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><ul><li><p>content: 文本内容</p></li><li><p>display: 按钮显示的文字(可选)</p></li><li><p>bg: 按钮的背景颜色(可选)</p></li><li><p>color: 按钮文字的颜色(可选)</p></li></ul><blockquote><p>Demo</p></blockquote><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">查看答案</span><br><span class="line">&#123;% hideBlock 查看答案 %&#125;</span><br><span class="line">傻子，怎么可能有答案</span><br><span class="line">&#123;% endhideBlock %&#125;</span><br></pre></td></tr></table></figure><p>查看答案</p><div class="hide-block"><button type="button" class="hide-button">查看答案</button><div class="hide-content"><p>傻子，怎么可能有答案</p></div></div></div><div class="tab-item-content" id="tag-hide-3"><p>如果你需要展示的内容太多，可以把它隐藏在收缩框里，需要时再把它展开。</p><p>( display 不能包含英文逗号，可用<code>&amp;sbquo;</code>)</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% hideToggle display,bg,color %&#125;</span><br><span class="line">content</span><br><span class="line">&#123;% endhideToggle %&#125;</span><br></pre></td></tr></table></figure><blockquote><p>Demo</p></blockquote><details class="toggle"><summary class="toggle-button">AnZhiYu主题安装方法</summary><div class="toggle-content"><p>在你的博客根目录里</p><p>git clone -b master <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes&#x2F;anzhiyu</p><p>如果想要安装比较新的dev分支，可以</p><p>git clone -b dev <a target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git">https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git</a> themes&#x2F;anzhiyu</p></div></details></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="链接卡片-link"><a href="#链接卡片-link" class="headerlink" title="链接卡片 link"></a>链接卡片 link</h2><div class="tabs" id="link"><ul class="nav-tabs"><button type="button" class="tab" data-href="link-1">标签语法</button><button type="button" class="tab active" data-href="link-2">样式预览</button><button type="button" class="tab" data-href="link-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="link-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 标题, 站点描述, 链接, 图片链接（可选） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="link-2"><div calss="anzhiyu-tag-link"><a class="tag-Link" target="_blank" href="https://github.com/owen0o0/getFavicon" rel="external nofollow noreferrer"><div class="tag-link-tips">引用站外地址</div><div class="tag-link-bottom"><div class="tag-link-left"><i class="anzhiyufont anzhiyu-icon-link"></i></div><div class="tag-link-right"><div class="tag-link-title">获取网站的Favicon图标并显示在你的网页上</div><div class="tag-link-sitename">owen0o0</div></div><i class="anzhiyufont anzhiyu-icon-angle-right"></i></div></a></div></div><div class="tab-item-content" id="link-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% link 获取网站的Favicon图标并显示在你的网页上,owen0o0,https://github.com/owen0o0/getFavicon %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="单选列表-radio"><a href="#单选列表-radio" class="headerlink" title="单选列表 radio"></a>单选列表 radio</h2><div class="tabs" id="radio"><ul class="nav-tabs"><button type="button" class="tab" data-href="radio-1">标签语法</button><button type="button" class="tab" data-href="radio-2">配置参数</button><button type="button" class="tab active" data-href="radio-3">样式预览</button><button type="button" class="tab" data-href="radio-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="radio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 样式参数（可选）, 文本（支持简单md） %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="radio-2"><ol><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>选中状态: checked</li></ol></div><div class="tab-item-content active" id="radio-3"><div class="checkbox"><input type="radio"><p>纯文本测试</p></div><div class="checkbox checked"><input type="radio" checked><p>支持简单的 <a target="_blank" rel="noopener external nofollow noreferrer" href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p></div><div class="checkbox red"><input type="radio"><p>支持自定义颜色</p></div><div class="checkbox green"><input type="radio"><p>绿色</p></div><div class="checkbox yellow"><input type="radio"><p>黄色</p></div><div class="checkbox cyan"><input type="radio"><p>青色</p></div><div class="checkbox blue"><input type="radio"><p>蓝色</p></div></div><div class="tab-item-content" id="radio-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% radio 纯文本测试 %&#125;</span><br><span class="line">&#123;% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %&#125;</span><br><span class="line">&#123;% radio red, 支持自定义颜色 %&#125;</span><br><span class="line">&#123;% radio green, 绿色 %&#125;</span><br><span class="line">&#123;% radio yellow, 黄色 %&#125;</span><br><span class="line">&#123;% radio cyan, 青色 %&#125;</span><br><span class="line">&#123;% radio blue, 蓝色 %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="上标标签-tip"><a href="#上标标签-tip" class="headerlink" title="上标标签 tip"></a>上标标签 tip</h2><div class="tip cogs"><p>主要样式参考自<a target="_blank" rel="noopener external nofollow noreferrer" href="https://www.antmoe.com/posts/3b43914f/">小康的 butterfly 渐变背景标签</a></p></div><div class="tabs" id="tip"><ul class="nav-tabs"><button type="button" class="tab" data-href="tip-1">标签语法</button><button type="button" class="tab" data-href="tip-2">配置参数</button><button type="button" class="tab active" data-href="tip-3">样式预览</button><button type="button" class="tab" data-href="tip-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="tip-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip [参数，可选] %&#125;文本内容&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="tip-2"><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标: 支持 fontawesome。</li></ol></div><div class="tab-item-content active" id="tip-3"><div class="tip"><p>default</p></div><div class="tip info"><p>info</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义 font awesome 图标</p></div></div><div class="tab-item-content" id="tip-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&#123;% tip %&#125;default&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip info %&#125;info&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip success %&#125;success&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip error %&#125;error&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip warning %&#125;warning&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bolt %&#125;bolt&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip ban %&#125;ban&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip home %&#125;home&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip sync %&#125;sync&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip cogs %&#125;cogs&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip key %&#125;key&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip bell %&#125;bell&#123;% endtip %&#125;</span><br><span class="line">&#123;% tip fa-atom %&#125;自定义 font awesome 图标&#123;% endtip %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="Note-Bootstrap-Callout"><a href="#Note-Bootstrap-Callout" class="headerlink" title="Note (Bootstrap Callout)"></a>Note (Bootstrap Callout)</h2><div class="tabs" id="note"><ul class="nav-tabs"><button type="button" class="tab" data-href="note-1">通用配置</button><button type="button" class="tab" data-href="note-2">语法格式</button><button type="button" class="tab" data-href="note-3">配置参数</button><button type="button" class="tab active" data-href="note-4">样式预览</button><button type="button" class="tab" data-href="note-5">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="note-1"><p>修改主题配置文件</p><figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">note:</span></span><br><span class="line">  <span class="comment"># Note tag style values:</span></span><br><span class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></span><br><span class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></span><br><span class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></span><br><span class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></span><br><span class="line">  <span class="attr">style:</span> <span class="string">simple</span></span><br><span class="line">  <span class="attr">icons:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">border_radius:</span> <span class="number">3</span></span><br><span class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></span><br><span class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></span><br><span class="line">  <span class="attr">light_bg_offset:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><p><code>Note</code>标签外挂有两种用法。<code>icons</code>和<code>light_bg_offset</code>只对方法一生效。</p><p><code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code></p></div><div class="tab-item-content" id="note-2"><p><code>方法一</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [class] [no-icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p><code>方法二</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note [color] [icon] [style] %&#125;</span><br><span class="line">Any content (support inline tags too.io).</span><br><span class="line">&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="note-3"><p><code>方法一</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default &#x2F; primary &#x2F; success &#x2F; info &#x2F; warning &#x2F; danger ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】不显示 icon</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple&#x2F;modern&#x2F;flat&#x2F;disabled）</td></tr></tbody></table><p><code>方法二</code></p><table><thead><tr><th align="left">参数</th><th align="left">用法</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">【可选】标识，不同的标识有不同的配色<br>（ default &#x2F; blue &#x2F; pink &#x2F; red &#x2F; purple &#x2F; orange &#x2F; green ）</td></tr><tr><td align="left">no-icon</td><td align="left">【可选】可配置自定义 icon (支持 fontawesome 图标和主题内置的阿里图标,<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>, 也可以配置 no-icon )</td></tr><tr><td align="left">style</td><td align="left">【可选】可以覆盖配置中的 style<br>（simple&#x2F;modern&#x2F;flat&#x2F;disabled）</td></tr></tbody></table></div><div class="tab-item-content active" id="note-4"><p><code>方法一</code></p><ol><li><code>simple</code>样式</li></ol><div class="note simple"><p>默认 提示块标签</p></div><div class="note default simple"><p>default 提示块标签</p></div><div class="note primary simple"><p>primary 提示块标签</p></div><div class="note success simple"><p>success 提示块标签</p></div><div class="note info simple"><p>info 提示块标签</p></div><div class="note warning simple"><p>warning 提示块标签</p></div><div class="note danger simple"><p>danger 提示块标签</p></div><ol start="2"><li><code>modern</code>样式</li></ol><div class="note modern"><p>默认 提示块标签</p></div><div class="note default modern"><p>default 提示块标签</p></div><div class="note primary modern"><p>primary 提示块标签</p></div><div class="note success modern"><p>success 提示块标签</p></div><div class="note info modern"><p>info 提示块标签</p></div><div class="note warning modern"><p>warning 提示块标签</p></div><div class="note danger modern"><p>danger 提示块标签</p></div><ol start="3"><li><code>flat</code>样式</li></ol><div class="note flat"><p>默认 提示块标签</p></div><div class="note default flat"><p>default 提示块标签</p></div><div class="note primary flat"><p>primary 提示块标签</p></div><div class="note success flat"><p>success 提示块标签</p></div><div class="note info flat"><p>info 提示块标签</p></div><div class="note warning flat"><p>warning 提示块标签</p></div><div class="note danger flat"><p>danger 提示块标签</p></div><ol start="4"><li><code>disabled</code>样式</li></ol><div class="note disabled"><p>默认 提示块标签</p></div><div class="note default disabled"><p>default 提示块标签</p></div><div class="note primary disabled"><p>primary 提示块标签</p></div><div class="note success disabled"><p>success 提示块标签</p></div><div class="note info disabled"><p>info 提示块标签</p></div><div class="note warning disabled"><p>warning 提示块标签</p></div><div class="note danger disabled"><p>danger 提示块标签</p></div><ol start="5"><li><code>no-icon</code>样式</li></ol><div class="note no-icon flat"><p>默认 提示块标签</p></div><div class="note default no-icon flat"><p>default 提示块标签</p></div><div class="note primary no-icon flat"><p>primary 提示块标签</p></div><div class="note success no-icon flat"><p>success 提示块标签</p></div><div class="note info no-icon flat"><p>info 提示块标签</p></div><div class="note warning no-icon flat"><p>warning 提示块标签</p></div><div class="note danger no-icon flat"><p>danger 提示块标签</p></div><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li>simple 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn simple"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram simple"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao simple"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi simple"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train simple"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding simple"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding simple"><i class="note-icon fas fa-bullhorn"></i><p>2022 年快到了….</p></div><div class="note pink icon-padding simple"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan simple"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding simple"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding simple"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding simple"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏器</p></div><ol start="2"><li>modern 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn modern"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram modern"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao modern"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi modern"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train modern"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding modern"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding modern"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding modern"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan modern"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding modern"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding modern"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding modern"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="3"><li>flat 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn flat"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram flat"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi flat"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train flat"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding flat"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding flat"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding flat"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan flat"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding flat"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding flat"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding flat"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="4"><li>disabled 样式</li></ol><p><code>主题内置阿里图标</code></p><div class="note anzhiyufont anzhiyu-icon-rocket disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue anzhiyufont anzhiyu-icon-bullhorn disabled"><p>2022 年快到了….</p></div><div class="note pink anzhiyufont anzhiyu-icon-instagram disabled"><p>小心开车 安全至上</p></div><div class="note red anzhiyufont anzhiyu-icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange anzhiyufont anzhiyu-icon-dengpao disabled"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple anzhiyufont anzhiyu-icon-sanmingzhi disabled"><p>剪刀石头布</p></div><div class="note green anzhiyufont anzhiyu-icon-ic_train disabled"><p>前端最讨厌的浏览器</p></div><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><div class="note icon-padding disabled"><i class="note-icon fab fa-cc-visa"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue icon-padding disabled"><i class="note-icon fas fa-bullhorn"></i><p>2021 年快到了….</p></div><div class="note pink icon-padding disabled"><i class="note-icon fas fa-car-crash"></i><p>小心开车 安全至上</p></div><div class="note red icon-fan disabled"><p>这是三片呢？还是四片？</p></div><div class="note orange icon-padding disabled"><i class="note-icon fas fa-battery-half"></i><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple icon-padding disabled"><i class="note-icon far fa-hand-scissors"></i><p>剪刀石头布</p></div><div class="note green icon-padding disabled"><i class="note-icon fab fa-internet-explorer"></i><p>前端最讨厌的浏览器</p></div><ol start="5"><li>no-icon 样式</li></ol><div class="note no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note blue no-icon flat"><p>2021 年快到了….</p></div><div class="note pink no-icon flat"><p>小心开车 安全至上</p></div><div class="note red no-icon flat"><p>这是三片呢？还是四片？</p></div><div class="note orange no-icon flat"><p>你是刷 Visa 还是 UnionPay</p></div><div class="note purple no-icon flat"><p>剪刀石头布</p></div><div class="note green no-icon flat"><p>前端最讨厌的浏览器</p></div></div><div class="tab-item-content" id="note-5"><p><code>方法一</code></p><ol><li><code>simple</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note simple %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default simple %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary simple %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success simple %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info simple %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning simple %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger simple %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="2"><li><code>modern</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note modern %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default modern %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary modern %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success modern %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info modern %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning modern %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger modern %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li><code>flat</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note flat %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default flat %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary flat %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success flat %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info flat %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning flat %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger flat %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="4"><li><code>disabled</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note disabled %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default disabled %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary disabled %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success disabled %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info disabled %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning disabled %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger disabled %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><ol start="5"><li><code>no-icon</code>样式</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;默认 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note default no-icon %&#125;default 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note primary no-icon %&#125;primary 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note success no-icon %&#125;success 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note info no-icon %&#125;info 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note warning no-icon %&#125;warning 提示块标签&#123;% endnote %&#125;</span><br><span class="line">&#123;% note danger no-icon %&#125;danger 提示块标签&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure><p><code>方法二</code></p><p>图标支持 <code>fontawesome</code> 和 <code>主题内置的阿里图标</code>，使用方法为加上对应的类名，<code>fontawesome</code>图标需开启主题配置文件中<code>icons.fontawesome</code>，默认未开启 fontawesome</p><ol><li><p>simple 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; simple %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; simple %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; simple %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; simple%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; simple %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; simple %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; simple %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>modern 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; modern %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; modern %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; modern %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; modern%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; modern %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; modern %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; modern %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>flat 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; flat %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; flat %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; flat %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; flat%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; flat %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; flat %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; flat %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>disabled 样式<br><code>主题内置阿里图标</code></p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;anzhiyufont anzhiyu-icon-rocket&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;anzhiyufont anzhiyu-icon-bullhorn&#x27; disabled %&#125;2022 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;anzhiyufont anzhiyu-icon-instagram&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;anzhiyufont anzhiyu-icon-fan&#x27; disabled%&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;anzhiyufont anzhiyu-icon-dengpao&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;anzhiyufont anzhiyu-icon-sanmingzhi&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;anzhiyufont anzhiyu-icon-ic<span class="emphasis">_train&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span></span><br></pre></td></tr></table></figure><p><code>fontawesome 图标</code>，开启主题配置文件中的<code>icons.fontawesome</code>为<code>true</code>后可见</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note &#x27;fab fa-cc-visa&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue &#x27;fas fa-bullhorn&#x27; disabled %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink &#x27;fas fa-car-crash&#x27; disabled %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red &#x27;icon-fan&#x27; disabled %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange &#x27;fas fa-battery-half&#x27; disabled %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple &#x27;far fa-hand-scissors&#x27; disabled %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green &#x27;fab fa-internet-explorer&#x27; disabled %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li><li><p>no-icon 样式</p><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#123;% note no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note blue no-icon %&#125;2021 年快到了....&#123;% endnote %&#125;</span><br><span class="line">&#123;% note pink no-icon %&#125;小心开车 安全至上&#123;% endnote %&#125;</span><br><span class="line">&#123;% note red no-icon %&#125;这是三片呢？还是四片？&#123;% endnote %&#125;</span><br><span class="line">&#123;% note orange no-icon %&#125;你是刷 Visa 还是 UnionPay&#123;% endnote %&#125;</span><br><span class="line">&#123;% note purple no-icon %&#125;剪刀石头布&#123;% endnote %&#125;</span><br><span class="line">&#123;% note green no-icon %&#125;前端最讨厌的浏览器&#123;% endnote %&#125;</span><br></pre></td></tr></table></figure></li></ol></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="音频-audio"><a href="#音频-audio" class="headerlink" title="音频 audio"></a>音频 audio</h2><div class="tabs" id="audio"><ul class="nav-tabs"><button type="button" class="tab" data-href="audio-1">标签语法</button><button type="button" class="tab active" data-href="audio-2">样式预览</button><button type="button" class="tab" data-href="audio-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="audio-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio 音频链接 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="audio-2"><div class="audio"><audio controls preload><source src="https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3" type="audio/mp3">Your browser does not support the audio tag.</audio></div></div><div class="tab-item-content" id="audio-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% audio https://npm.elemecdn.com/anzhiyu-music@1.0.4/%E9%9D%92%E8%8A%B1%E7%93%B7/%E9%9D%92%E8%8A%B1%E7%93%B7.mp3 %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="视频-video"><a href="#视频-video" class="headerlink" title="视频 video"></a>视频 video</h2><div class="tabs" id="video"><ul class="nav-tabs"><button type="button" class="tab" data-href="video-1">标签语法</button><button type="button" class="tab" data-href="video-2">参数配置</button><button type="button" class="tab active" data-href="video-3">样式预览</button><button type="button" class="tab" data-href="video-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="video-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video 视频链接 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="video-2"><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol></div><div class="tab-item-content active" id="video-3"><ol start="3"><li>100%宽度</li></ol><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478a1eeb1386.png" alt="100%宽度"></p><ol start="2"><li>50%宽度</li></ol><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478a20a5f242.png" alt="50%宽度"></p><ol start="3"><li>25%宽度</li></ol><p><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://bu.dusays.com/2023/06/01/6478a22b26088.png" alt="25%宽度"></p></div><div class="tab-item-content" id="video-4"><ol><li>100%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br></pre></td></tr></table></figure><ol start="2"><li>50%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 2 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure><ol start="3"><li>25%宽度</li></ol><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;% videos, 4 %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %&#125;</span></span><br><span class="line"><span class="emphasis">&#123;% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %&#125;</span><br><span class="line">&#123;% endvideos %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="段落文本-p"><a href="#段落文本-p" class="headerlink" title="段落文本 p"></a>段落文本 p</h2><div class="tabs" id="p"><ul class="nav-tabs"><button type="button" class="tab" data-href="p-1">标签语法</button><button type="button" class="tab" data-href="p-2">配置参数</button><button type="button" class="tab active" data-href="p-3">样式预览</button><button type="button" class="tab" data-href="p-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="p-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% p 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="p-2"><ol><li>字体: logo, code</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol></div><div class="tab-item-content active" id="p-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<p class="p red">红色</p>、<p class="p yellow">黄色</p>、<p class="p green">绿色</p>、<p class="p cyan">青色</p>、<p class="p blue">蓝色</p>、<p class="p gray">灰色</p>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<p class="p center logo large">Volantis</p><p class="p center small">A Wonderful Theme for Hexo</p></li></ul></div><div class="tab-item-content" id="p-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% p red, 红色 %&#125;、&#123;% p yellow, 黄色 %&#125;、&#123;% p green, 绿色 %&#125;、&#123;% p cyan, 青色 %&#125;、&#123;% p blue, 蓝色 %&#125;、&#123;% p gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% p center logo large, Volantis %&#125;</span><br><span class="line">  &#123;% p center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="行内文本-span"><a href="#行内文本-span" class="headerlink" title="行内文本 span"></a>行内文本 span</h2><div class="tabs" id="span"><ul class="nav-tabs"><button type="button" class="tab" data-href="span-1">标签语法</button><button type="button" class="tab" data-href="span-2">配置参数</button><button type="button" class="tab active" data-href="span-3">样式预览</button><button type="button" class="tab" data-href="span-4">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="span-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% span 样式参数(参数以空格划分), 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content" id="span-2"><ol><li>字体: logo, code</li><li>颜色: <span class="p red">red</span>,<span class="p yellow">yellow</span>,<span class="p green">green</span>,<span class="p cyan">cyan</span>,<span class="p blue">blue</span>,<span class="p gray">gray</span></li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol></div><div class="tab-item-content active" id="span-3"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<span class="p red">红色</span>、<span class="p yellow">黄色</span>、<span class="p green">绿色</span>、<span class="p cyan">青色</span>、<span class="p blue">蓝色</span>、<span class="p gray">灰色</span>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<br><span class="p center logo large">Volantis</span><br><span class="p center small">A Wonderful Theme for Hexo</span></li></ul></div><div class="tab-item-content" id="span-4"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">  在一段话中方便插入各种颜色的标签，包括：&#123;% span red, 红色 %&#125;、&#123;% span yellow, 黄色 %&#125;、&#123;% span green, 绿色 %&#125;、&#123;% span cyan, 青色 %&#125;、&#123;% span blue, 蓝色 %&#125;、&#123;% span gray, 灰色 %&#125;。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">  文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">  &#123;% span center logo large, Volantis %&#125;</span><br><span class="line">  &#123;% span center small, A Wonderful Theme for Hexo %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><h2 id="行内文本样式-text"><a href="#行内文本样式-text" class="headerlink" title="行内文本样式 text"></a>行内文本样式 text</h2><div class="tabs" id="text"><ul class="nav-tabs"><button type="button" class="tab" data-href="text-1">标签语法</button><button type="button" class="tab active" data-href="text-2">样式预览</button><button type="button" class="tab" data-href="text-3">示例源码</button></ul><div class="tab-contents"><div class="tab-item-content" id="text-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&#123;% u 文本内容 %&#125;</span><br><span class="line">&#123;% emp 文本内容 %&#125;</span><br><span class="line">&#123;% wavy 文本内容 %&#125;</span><br><span class="line">&#123;% del 文本内容 %&#125;</span><br><span class="line">&#123;% kbd 文本内容 %&#125;</span><br><span class="line">&#123;% psw 文本内容 %&#125;</span><br></pre></td></tr></table></figure></div><div class="tab-item-content active" id="text-2"><ol><li>带 <u>下划线</u> 的文本</li><li>带<emp>着重号</emp>的文本</li><li>带<wavy>波浪线</wavy>的文本</li><li>带 <del>删除线</del> 的文本</li><li>键盘样式的文本 <kbd>command</kbd> + <kbd>D</kbd></li><li>密码样式的文本：<psw>这里没有验证码</psw></li></ol></div><div class="tab-item-content" id="text-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">1.</span> 带 &#123;% u 下划线 %&#125; 的文本</span><br><span class="line"><span class="bullet">2.</span> 带 &#123;% emp 着重号 %&#125; 的文本</span><br><span class="line"><span class="bullet">3.</span> 带 &#123;% wavy 波浪线 %&#125; 的文本</span><br><span class="line"><span class="bullet">4.</span> 带 &#123;% del 删除线 %&#125; 的文本</span><br><span class="line"><span class="bullet">5.</span> 键盘样式的文本 &#123;% kbd command %&#125; + &#123;% kbd D %&#125;</span><br><span class="line"><span class="bullet">6.</span> 密码样式的文本：&#123;% psw 这里没有验证码 %&#125;</span><br></pre></td></tr></table></figure></div></div><div class="tab-to-top"><button type="button" aria-label="scroll to top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div></article><div class="post-copyright"><div class="copyright-cc-box"><i class="anzhiyufont anzhiyu-icon-copyright"></i></div><div class="post-copyright__author_box"><a class="post-copyright__author_img" href="/" title="头像"><img class="post-copyright__author_img_back" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://q1.qlogo.cn/g?b=qq&amp;nk=2071916845&amp;s=640" title="头像" alt="头像"><img class="post-copyright__author_img_front" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://q1.qlogo.cn/g?b=qq&amp;nk=2071916845&amp;s=640" title="头像" alt="头像"></a><div class="post-copyright__author_name">云少</div><div class="post-copyright__author_desc">站在巨人的肩膀罢了</div></div><div class="post-copyright__post__info"><a class="post-copyright__original" title="该文章为原创文章，注意版权协议" href="https://it985.github.io/posts/d50a.html">原创</a><a class="post-copyright-title"><span onclick='rm.copyPageUrl("https://it985.github.io/posts/d50a.html")'>安知鱼主题标签 Tag Plugins</span></a></div><div class="post-tools" id="post-tools"><div class="post-tools-left"><div class="rewardLeftButton"><div class="post-reward" onclick="anzhiyu.addRewardMask()"><div class="reward-button button--animated" title="赞赏作者"><i class="anzhiyufont anzhiyu-icon-hand-heart-fill"></i>打赏作者</div><div class="reward-main"><div class="reward-all"><span class="reward-title">感谢你赐予我前进的力量</span><ul class="reward-group"><li class="reward-item"><a href="/img/wxpay.webp" target="_blank"><img class="post-qr-code-img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="/img/wxpay.webp" alt="wechat"></a><div class="post-qr-code-desc">wechat</div></li><li class="reward-item"><a href="/img/alipay.webp" target="_blank"><img class="post-qr-code-img" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="/img/alipay.webp" alt="alipay"></a><div class="post-qr-code-desc">alipay</div></li></ul><a class="reward-main-btn" href="/about/#about-reward" target="_blank"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></div></div></div><div id="quit-box" onclick="anzhiyu.removeRewardMask()" style="display:none"></div></div><div class="shareRight"><div class="share-link mobile"><div class="share-qrcode"><div class="share-button" title="使用手机访问这篇文章"><i class="anzhiyufont anzhiyu-icon-qrcode"></i></div><div class="share-main"><div class="share-main-all"><div id="qrcode" title="https://it985.github.io/posts/d50a.html"></div><div class="reward-dec">使用手机访问这篇文章</div></div></div></div></div><div class="share-link weibo"><a class="share-button" target="_blank" href="https://service.weibo.com/share/share.php?title=安知鱼主题标签 Tag Plugins&amp;url=https://it985.github.io/posts/d50a.html&amp;pic=https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp" rel="external nofollow noreferrer noopener"><i class="anzhiyufont anzhiyu-icon-weibo"></i></a></div><div class="share-link copyurl"><div class="share-button" id="post-share-url" title="复制链接" onclick="rm.copyPageUrl()"><i class="anzhiyufont anzhiyu-icon-link"></i></div></div></div></div></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://it985.github.io" target="_blank">云少IT</a>！</span></div></div><div class="post-tools-right"><div class="tag_share"><div class="post-meta__box"><div class="post-meta__box__tag-list"></div></div><div class="post_share"><div class="social-share" data-image="https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.cbd.int/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/posts/fb3832f5.html"><img class="prev-cover" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e146a8bbd.webp" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">提问的智慧</div></div></a></div></nav><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="anzhiyufont anzhiyu-icon-comments"></i><span> 评论</span></div><div class="comment-randomInfo"><a onclick="anzhiyu.addRandomCommentInfo()" href="javascript:void(0)" rel="external nofollow noreferrer">匿名评论</a><a href="/privacy" style="margin-left:4px">隐私政策</a></div><div class="comment-switch"><span class="first-comment">Twikoo</span><span id="switch-btn"></span><span class="second-comment">Artalk</span></div><div class="comment-tips" id="comment-tips"><span>✅ 你无需删除空行，直接评论以获取最佳展示效果</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div><div><div id="artalk-wrap"></div></div></div></div><div class="comment-barrage"></div></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="anzhiyufont anzhiyu-icon-bars"></i><span>文章目录</span><span class="toc-percentage"></span></div><div class="toc-content is-expand"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%89%E9%92%AE-btns"><span class="toc-number">1.</span> <span class="toc-text">按钮 btns</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%89%E9%92%AE-btn"><span class="toc-number">2.</span> <span class="toc-text">按钮 btn</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BD%91%E7%AB%99%E5%8D%A1%E7%89%87-sites"><span class="toc-number">3.</span> <span class="toc-text">网站卡片 sites</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E5%BC%A0%E5%9B%BE%E7%89%87-image"><span class="toc-number">4.</span> <span class="toc-text">单张图片 image</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#inlineImg-%E8%A1%8C%E5%86%85%E5%9B%BE%E7%89%87"><span class="toc-number">5.</span> <span class="toc-text">inlineImg 行内图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%9B%BE%E7%89%87-inlineimage"><span class="toc-number">6.</span> <span class="toc-text">行内图片 inlineimage</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#label-%E6%A0%87%E7%AD%BE"><span class="toc-number">7.</span> <span class="toc-text">label 标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#timeline"><span class="toc-number">8.</span> <span class="toc-text">timeline</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flink-%E5%8F%8B%E9%93%BE%E6%A0%87%E7%AD%BE"><span class="toc-number">9.</span> <span class="toc-text">flink 友链标签</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#mermaid-%E5%9B%BE"><span class="toc-number">10.</span> <span class="toc-text">mermaid 图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E9%80%89%E5%88%97%E8%A1%A8-checkbox"><span class="toc-number">11.</span> <span class="toc-text">复选列表 checkbox</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#dogeplayer-%E5%A4%9A%E5%90%89%E4%BA%91%E6%92%AD%E6%94%BE%E5%99%A8"><span class="toc-number">12.</span> <span class="toc-text">dogeplayer 多吉云播放器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8A%98%E5%8F%A0%E6%A1%86-folding"><span class="toc-number">13.</span> <span class="toc-text">折叠框 folding</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Gallery-%E7%9B%B8%E5%86%8C%E5%9B%BE%E5%BA%93"><span class="toc-number">14.</span> <span class="toc-text">Gallery 相册图库</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#tag-hide"><span class="toc-number">15.</span> <span class="toc-text">tag-hide</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%93%BE%E6%8E%A5%E5%8D%A1%E7%89%87-link"><span class="toc-number">16.</span> <span class="toc-text">链接卡片 link</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E9%80%89%E5%88%97%E8%A1%A8-radio"><span class="toc-number">17.</span> <span class="toc-text">单选列表 radio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%8A%E6%A0%87%E6%A0%87%E7%AD%BE-tip"><span class="toc-number">18.</span> <span class="toc-text">上标标签 tip</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Note-Bootstrap-Callout"><span class="toc-number">19.</span> <span class="toc-text">Note (Bootstrap Callout)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9F%B3%E9%A2%91-audio"><span class="toc-number">20.</span> <span class="toc-text">音频 audio</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A7%86%E9%A2%91-video"><span class="toc-number">21.</span> <span class="toc-text">视频 video</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%AE%B5%E8%90%BD%E6%96%87%E6%9C%AC-p"><span class="toc-number">22.</span> <span class="toc-text">段落文本 p</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC-span"><span class="toc-number">23.</span> <span class="toc-text">行内文本 span</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F-text"><span class="toc-number">24.</span> <span class="toc-text">行内文本样式 text</span></a></li></ol></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="footer_deal"><a class="deal_link" href="mailto:2071916845@qq.com" rel="external nofollow noreferrer" title="email"><i class="anzhiyufont anzhiyu-icon-envelope"></i></a><a class="deal_link" target="_blank" rel="noopener external nofollow noreferrer" href="https://weibo.com/" title="微博"><i class="anzhiyufont anzhiyu-icon-weibo"></i></a><a class="deal_link" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.facebook.com/" title="facebook"><i class="anzhiyufont anzhiyu-icon-facebook1"></i></a><a class="deal_link" href="/atom.xml" title="RSS"><i class="anzhiyufont anzhiyu-icon-rss"></i></a><img class="footer_mini_logo" title="返回顶部" alt="返回顶部" onclick="anzhiyu.scrollToDest(0,500)" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://q1.qlogo.cn/g?b=qq&amp;nk=2071916845&amp;s=640" size="50px"><a class="deal_link" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/it985" title="Github"><i class="anzhiyufont anzhiyu-icon-github"></i></a><a class="deal_link" target="_blank" rel="noopener external nofollow noreferrer" href="https://space.bilibili.com/300767383" title="Bilibili"><i class="anzhiyufont anzhiyu-icon-bilibili"></i></a><a class="deal_link" target="_blank" rel="noopener external nofollow noreferrer" href="https://v.douyin.com/" title="抖音"><i class="anzhiyufont anzhiyu-icon-tiktok"></i></a><a class="deal_link" href="/copyright" title="CC"><i class="anzhiyufont anzhiyu-icon-copyright-line"></i></a></div><div id="anzhiyu-footer"><div class="footer-group"><div class="footer-title">服务</div><div class="footer-links"><a class="footer-item" title="51la统计" target="_blank" rel="noopener external nofollow noreferrer" href="https://v6.51.la/">51la统计</a><a class="footer-item" title="十年之约" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.foreverblog.cn/">十年之约</a><a class="footer-item" title="开往" target="_blank" rel="noopener external nofollow noreferrer" href="https://github.com/travellings-link/travellings">开往</a></div></div><div class="footer-group"><div class="footer-title">导航</div><div class="footer-links"><a class="footer-item" title="即刻短文" href="/essay/">即刻短文</a><a class="footer-item" title="友链文章" href="/fcircle/">友链文章</a><a class="footer-item" title="留言板" href="/comments/">留言板</a></div></div><div class="footer-group"><div class="footer-title">协议</div><div class="footer-links"><a class="footer-item" title="免责声明" href="/disclaimer/">免责声明</a><a class="footer-item" title="隐私协议" href="/privacy/">隐私协议</a><a class="footer-item" title="Cookies" href="/cookies/">Cookies</a><a class="footer-item" title="版权协议" href="/copyright/">版权协议</a></div></div><div class="footer-group"><div class="footer-title">娱乐</div><div class="footer-links"><a class="footer-item" title="小空调" href="/air-conditioner/">小空调</a><a class="footer-item" title="围住小猫" href="/catch-cat/">围住小猫</a><a class="footer-item" title="免费图床" href="/huluxiapicture/">免费图床</a></div></div><div class="footer-group"><div class="footer-title">推荐分类</div><div class="footer-links"><a class="footer-item" title="Java" href="/categories/Java/">Java</a><a class="footer-item" title="面试" href="/categories/%E9%9D%A2%E8%AF%95/">面试</a></div></div><div class="footer-group"><div class="footer-title-group"><div class="footer-title">友链</div><a class="random-friends-btn" id="footer-random-friends-btn" href="javascript:addFriendLinksInFooter();" rel="external nofollow noreferrer" title="换一批友情链接"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right"></i></a></div><div class="footer-links" id="friend-links-in-footer"></div></div></div><div id="workboard"><img class="workSituationImg boardsign" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-上班摸鱼中.svg" alt="距离月入25k也就还差一个大佬带我~" title="距离月入25k也就还差一个大佬带我~"><div id="runtimeTextTip"></div></div><div class="wordcount"></div><span>云少已经写了 996.7k 字，</span><span>好像写完一本我国著名的 四大名著 了！！！</span><p id="ghbdages"><a class="github-badge" target="_blank" href="https://hexo.io/" rel="external nofollow noreferrer" style="margin-inline:5px" data-title="博客框架为Hexo_v5.4.0" title="博客框架为Hexo_v5.4.0"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Frame-Hexo.svg" alt="博客框架为Hexo_v5.4.0"></a><a class="github-badge" target="_blank" href="https://www.upyun.com/?utm_source=lianmeng&amp;utm_medium=referral" rel="external nofollow noreferrer" style="margin-inline:5px" data-title="本站使用又拍云为静态资源提供CDN加速" title="本站使用又拍云为静态资源提供CDN加速"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://img.shields.io/badge/CDN-%E5%8F%88%E6%8B%8D%E4%BA%91-orange%3Fstyle%3Dflat%26logo%3D%E5%8F%88%E6%8B%8D%E4%BA%91" alt="本站使用又拍云为静态资源提供CDN加速"></a><a class="github-badge" target="_blank" href="https://github.com/" rel="external nofollow noreferrer" style="margin-inline:5px" data-title="本站项目由Github托管" title="本站项目由Github托管"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.1.5/img/badge/Source-Github.svg" alt="本站项目由Github托管"></a><a class="github-badge" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow noreferrer" style="margin-inline:5px" data-title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可" title="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://npm.elemecdn.com/anzhiyu-blog@2.2.0/img/badge/Copyright-BY-NC-SA.svg" alt="本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可"></a><a class="github-badge" target="_blank" href="https://icp.gov.moe/?keyword=20221607" rel="external nofollow noreferrer" style="margin-inline:5px" data-title="萌ICP备20221607号" title="萌ICP备20221607号"><img src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://img.shields.io/badge/%E8%90%8CICP%E5%A4%87-20221607-fe1384?style-flat&amp;logo=" alt="萌ICP备20221607号"></a></p></div><div id="footer-bar"><div class="footer-bar-links"><div class="footer-bar-left"><div id="footer-bar-tips"><div class="copyright">&copy;2018 - 2023 By <a class="footer-bar-link" href="/" title="云少" target="_blank">云少</a></div></div><div id="footer-type-tips"></div><div class="js-pjax"><script>function subtitleType(){fetch("https://v1.hitokoto.cn").then(t=>t.json()).then(t=>{var e="出自 "+t.from,p=[];p.unshift(t.hitokoto,e),window.typed=new Typed("#footer-type-tips",{strings:p,startDelay:300,typeSpeed:150,loop:!0,backSpeed:50})})}"function"==typeof Typed?subtitleType():getScript("https://cdn.cbd.int/typed.js@2.0.15/dist/typed.umd.js").then(subtitleType)</script></div></div><div class="footer-bar-right"><a class="footer-bar-link" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.tryrun.top" title="云少">云少</a><a class="footer-bar-link" target="_blank" rel="noopener external nofollow noreferrer" href="https://beian.miit.gov.cn/" title="鄂ICP备2021021095号-2">鄂ICP备2021021095号-2</a><a class="footer-bar-link cc" href="/copyright" title="cc协议"><i class="anzhiyufont anzhiyu-icon-copyright-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-by-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nc-line"></i><i class="anzhiyufont anzhiyu-icon-creative-commons-nd-line"></i></a></div></div></div></footer></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="sidebar-site-data site-data is-center"><a href="/archives/" title="archive"><div class="headline">文章</div><div class="length-num">861</div></a><a href="/tags/" title="tag"><div class="headline">标签</div><div class="length-num">35</div></a><a href="/categories/" title="category"><div class="headline">分类</div><div class="length-num">6</div></a></div><span class="sidebar-menu-item-title">功能</span><div class="sidebar-menu-item"><a class="darkmode_switchbutton menu-child" href="javascript:void(0);" rel="external nofollow noreferrer" title="显示模式"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span>显示模式</span></a></div><div class="back-menu-list-groups"><div class="back-menu-list-group"><div class="back-menu-list-title">网页</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.tryrun.top/" title="博客"><img class="back-menu-item-icon" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="/img/favicon.ico" alt="博客"><span class="back-menu-item-text">博客</span></a></div></div><div class="back-menu-list-group"><div class="back-menu-list-title">项目</div><div class="back-menu-list"><a class="back-menu-item" target="_blank" rel="noopener external nofollow noreferrer" href="https://www.tryrun.top" title="图床"><img class="back-menu-item-icon" src= "" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" data-lazy-src="https://www.tryrun.top/favicon.ico" alt="图床"><span class="back-menu-item-text">图床</span></a></div></div></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>望四方</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/archives/"><i class="anzhiyufont anzhiyu-icon-box-archive faa-tada" style="font-size:.9em"></i><span> 归名档</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/categories/"><i class="anzhiyufont anzhiyu-icon-shapes faa-tada" style="font-size:.9em"></i><span> 归四类</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags faa-tada" style="font-size:.9em"></i><span> 书中签</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/charts/"><i class="fa-fw fas fa-chart-bar faa-tada"></i><span> 统计</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>友链</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/link/"><i class="anzhiyufont anzhiyu-icon-link faa-tada" style="font-size:.9em"></i><span> 四方好友</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/fcircle/"><i class="anzhiyufont anzhiyu-icon-artstation faa-tada" style="font-size:.9em"></i><span> 朋友圈</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/comments/"><i class="anzhiyufont anzhiyu-icon-envelope faa-tada" style="font-size:.9em"></i><span> 留言板</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>我的</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/bangumis/"><i class="anzhiyufont anzhiyu-icon-bilibili faa-tada" style="font-size:.9em"></i><span> 追番页</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/album/"><i class="anzhiyufont anzhiyu-icon-images faa-tada" style="font-size:.9em"></i><span> 刹那间</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/equipment/"><i class="fas fa-heart faa-tada"></i><span> 我的装备</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/collect/"><i class="fas fa-camcorder faa-tada"></i><span> 观影阁</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);" rel="external nofollow noreferrer"><span>关于</span></a><ul class="menus_item_child"><li><a class="site-page child faa-parent animated-hover" href="/about/"><i class="anzhiyufont anzhiyu-icon-paper-plane faa-tada" style="font-size:.9em"></i><span> 关于本人</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/essay/"><i class="anzhiyufont anzhiyu-icon-lightbulb faa-tada" style="font-size:.9em"></i><span> 闲言碎语</span></a></li><li><a class="site-page child faa-parent animated-hover" href="javascript:toRandomPost()" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-shoe-prints1 faa-tada" style="font-size:.9em"></i><span> 随便逛逛</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/disclaimer/"><i class="fas fa-heart faa-tada"></i><span> 免责声明</span></a></li><li><a class="site-page child faa-parent animated-hover" href="/love/"><i class="anzhiyufont anzhiyu-icon-heartbeat faa-tada" style="font-size:.9em"></i><span> 恋爱小屋</span></a></li></ul></div></div><span class="sidebar-menu-item-title">标签</span><div class="card-tags"><div class="item-headline"></div><div class="card-tag-cloud"><a href="/tags/API/" style="font-size:.88rem;color:#758692">API<sup>43</sup></a><a href="/tags/Base64/" style="font-size:.88rem;color:#2584bf">Base64<sup>1</sup></a><a href="/tags/Collectors/" style="font-size:.88rem;color:#bfad3e">Collectors<sup>3</sup></a><a href="/tags/Date/" style="font-size:.88rem;color:#b9b609">Date<sup>3</sup></a><a href="/tags/Executor/" style="font-size:.88rem;color:#14c83c">Executor<sup>9</sup></a><a href="/tags/Guava/" style="font-size:.88rem;color:#0a1878">Guava<sup>1</sup></a><a href="/tags/JVM/" style="font-size:.88rem;color:#625421">JVM<sup>8</sup></a><a href="/tags/Java8/" style="font-size:.88rem;color:#aa71bf">Java8<sup>21</sup></a><a href="/tags/Java9/" style="font-size:.88rem;color:#ad8774">Java9<sup>21</sup></a><a href="/tags/Java%E5%B9%B6%E5%8F%91/" style="font-size:.88rem;color:#19704c">Java并发<sup>20</sup></a><a href="/tags/Lambda/" style="font-size:.88rem;color:#7e5c78">Lambda<sup>4</sup></a><a href="/tags/Lock/" style="font-size:.88rem;color:#700769">Lock<sup>1</sup></a><a href="/tags/Maven/" style="font-size:.88rem;color:#2b8671">Maven<sup>1</sup></a><a href="/tags/Memcached/" style="font-size:.88rem;color:#1b0694">Memcached<sup>23</sup></a><a href="/tags/Mongodb/" style="font-size:.88rem;color:#36202d">Mongodb<sup>49</sup></a><a href="/tags/Queue/" style="font-size:.88rem;color:#643f76">Queue<sup>1</sup></a><a href="/tags/Redis/" style="font-size:.88rem;color:#1e4c38">Redis<sup>27</sup></a><a href="/tags/Stream/" style="font-size:.88rem;color:#a5a097">Stream<sup>4</sup></a><a href="/tags/Thread/" style="font-size:.88rem;color:#05682d">Thread<sup>7</sup></a><a href="/tags/Thread-pool/" style="font-size:.88rem;color:#38ad2a">Thread pool<sup>7</sup></a><a href="/tags/forkJoinPool/" style="font-size:.88rem;color:#827a6b">forkJoinPool<sup>2</sup></a><a href="/tags/stream/" style="font-size:.88rem;color:#4a3ac7">stream<sup>1</sup></a><a href="/tags/%E4%B8%93%E6%A0%8F/" style="font-size:.88rem;color:#b89c14">专栏<sup>35</sup></a><a href="/tags/%E4%BA%8B%E5%8A%A1/" style="font-size:.88rem;color:#922401">事务<sup>1</sup></a><a href="/tags/%E4%BC%98%E5%8C%96/" style="font-size:.88rem;color:#437d09">优化<sup>1</sup></a><a href="/tags/%E5%91%BD%E4%BB%A4/" style="font-size:.88rem;color:#705b06">命令<sup>57</sup></a><a href="/tags/%E5%AE%89%E8%A3%85/" style="font-size:.88rem;color:#06a544">安装<sup>6</sup></a><a href="/tags/%E5%B7%A5%E5%85%B7/" style="font-size:.88rem;color:#c86c4f">工具<sup>2</sup></a><a href="/tags/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/" style="font-size:.88rem;color:#560b2c">数据类型<sup>8</sup></a><a href="/tags/%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/" style="font-size:.88rem;color:#4e0a32">生命周期<sup>1</sup></a><a href="/tags/%E7%AE%80%E4%BB%8B/" style="font-size:.88rem;color:#230f8e">简介<sup>7</sup></a><a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size:.88rem;color:#c0771e">算法<sup>10</sup></a><a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size:.88rem;color:#b40caa">设计模式<sup>38</sup></a><a href="/tags/%E9%85%8D%E7%BD%AE/" style="font-size:.88rem;color:#67389a">配置<sup>2</sup></a><a href="/tags/%E9%9D%A2%E8%AF%95/" style="font-size:.88rem;color:#57425c">面试<sup>11</sup></a></div></div><hr></div></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="anzhiyufont anzhiyu-icon-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="anzhiyufont anzhiyu-icon-arrows-left-right"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="anzhiyufont anzhiyu-icon-gear"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="anzhiyufont anzhiyu-icon-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="anzhiyufont anzhiyu-icon-comments"></i></a><button type="button" title="切换背景" onclick="toggleWinbox()"><i class="fas fa-display"></i></button><button id="go-up" type="button" title="回到顶部"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></button></div></div><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="anzhiyufont anzhiyu-icon-xmark"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div></div><div id="rightMenu"><div class="rightMenu-group rightMenu-small"><div class="rightMenu-item" id="menu-backward"><i class="anzhiyufont anzhiyu-icon-arrow-left"></i></div><div class="rightMenu-item" id="menu-forward"><i class="anzhiyufont anzhiyu-icon-arrow-right"></i></div><div class="rightMenu-item" id="menu-refresh"><i class="anzhiyufont anzhiyu-icon-arrow-rotate-right" style="font-size:1rem"></i></div><div class="rightMenu-item" id="menu-top"><i class="anzhiyufont anzhiyu-icon-arrow-up"></i></div></div><div class="rightMenu-group rightMenu-line rightMenuPlugin"><div class="rightMenu-item" id="menu-copytext"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制选中文本</span></div><div class="rightMenu-item" id="menu-pastetext"><i class="anzhiyufont anzhiyu-icon-paste"></i><span>粘贴文本</span></div><a class="rightMenu-item" id="menu-commenttext"><i class="anzhiyufont anzhiyu-icon-comment-medical"></i><span>引用到评论</span></a><div class="rightMenu-item" id="menu-newwindow"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开</span></div><div class="rightMenu-item" id="menu-copylink"><i class="anzhiyufont anzhiyu-icon-link"></i><span>复制链接地址</span></div><div class="rightMenu-item" id="menu-copyimg"><i class="anzhiyufont anzhiyu-icon-images"></i><span>复制此图片</span></div><div class="rightMenu-item" id="menu-downloadimg"><i class="anzhiyufont anzhiyu-icon-download"></i><span>下载此图片</span></div><div class="rightMenu-item" id="menu-newwindowimg"><i class="anzhiyufont anzhiyu-icon-window-restore"></i><span>新窗口打开图片</span></div><div class="rightMenu-item" id="menu-search"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>站内搜索</span></div><div class="rightMenu-item" id="menu-searchBaidu"><i class="anzhiyufont anzhiyu-icon-magnifying-glass"></i><span>百度搜索</span></div><div class="rightMenu-item" id="menu-music-toggle"><i class="anzhiyufont anzhiyu-icon-play"></i><span>播放音乐</span></div><div class="rightMenu-item" id="menu-music-back"><i class="anzhiyufont anzhiyu-icon-backward"></i><span>切换到上一首</span></div><div class="rightMenu-item" id="menu-music-forward"><i class="anzhiyufont anzhiyu-icon-forward"></i><span>切换到下一首</span></div><div class="rightMenu-item" id="menu-music-playlist" onclick="window.open(&quot;https://y.qq.com/n/ryqq/playlist/8802438608&quot;, &quot;_blank&quot;);" style="display:none"><i class="anzhiyufont anzhiyu-icon-radio"></i><span>查看所有歌曲</span></div><div class="rightMenu-item" id="menu-music-copyMusicName"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制歌名</span></div></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item menu-link" id="menu-randomPost"><i class="anzhiyufont anzhiyu-icon-shuffle"></i><span>随便逛逛</span></a><a class="rightMenu-item menu-link" href="/categories/"><i class="anzhiyufont anzhiyu-icon-cube"></i><span>博客分类</span></a><a class="rightMenu-item menu-link" href="/tags/"><i class="anzhiyufont anzhiyu-icon-tags"></i><span>文章标签</span></a></div><div class="rightMenu-group rightMenu-line rightMenuOther"><a class="rightMenu-item" id="menu-copy" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-copy"></i><span>复制地址</span></a><a class="rightMenu-item" id="menu-commentBarrage" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-message"></i><span class="menu-commentBarrage-text">关闭热评</span></a><a class="rightMenu-item" id="menu-darkmode" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-circle-half-stroke"></i><span class="menu-darkmode-text">深色模式</span></a><a class="rightMenu-item" id="menu-translate" href="javascript:void(0);" rel="external nofollow noreferrer"><i class="anzhiyufont anzhiyu-icon-language"></i><span>轉為繁體</span></a></div></div><div id="rightmenu-mask"></div><div id="he-plugin-simple"></div><script>var WIDGET={CONFIG:{modules:"0124",background:"2",tmpColor:"FFFFFF",tmpSize:"16",cityColor:"FFFFFF",citySize:"16",aqiColor:"E8D87B",aqiSize:"16",weatherIconSize:"24",alertIconSize:"18",padding:"10px 10px 10px 10px",shadow:"0",language:"auto",borderRadius:"20",fixed:"true",vertical:"top",horizontal:"left",left:"20",top:"7.1",key:"df245676fb434a0691ead1c63341cd94"}}</script><link rel="stylesheet" href="https://widget.qweather.net/simple/static/css/he-simple.css?v=1.4.0"><script src="https://widget.qweather.net/simple/static/js/he-simple.js?v=1.4.0"></script><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.cbd.int/@fancyapps/ui@5.0.20/dist/fancybox/fancybox.umd.js"></script><script src="https://cdn.cbd.int/instant.page@5.2.0/instantpage.js" type="module"></script><script src="https://cdn.cbd.int/vanilla-lazyload@17.8.4/dist/lazyload.iife.min.js"></script><script src="https://cdn.cbd.int/node-snackbar@0.1.16/dist/snackbar.min.js"></script><script>function panguFn(){"object"==typeof pangu?pangu.autoSpacingPage():getScript("https://cdn.cbd.int/pangu@4.0.7/dist/browser/pangu.min.js").then(()=>{pangu.autoSpacingPage()})}function panguInit(){panguFn()}document.addEventListener("DOMContentLoaded",panguInit)</script><script>var meting_api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r"</script><canvas id="universe"></canvas><script async src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/dark/dark.js"></script><script>var HoldLog=console.log;console.log=function(){};let now1=new Date;queueMicrotask(()=>{function o(){HoldLog.apply(console,arguments)}var c=new Date("09/01/2018 00:00:00"),c=(now1.setTime(now1.getTime()+250),(now1-c)/1e3/60/60/24),c=["欢迎使用安知鱼!","生活明朗, 万物可爱",`
        
       █████╗ ███╗   ██╗███████╗██╗  ██╗██╗██╗   ██╗██╗   ██╗
      ██╔══██╗████╗  ██║╚══███╔╝██║  ██║██║╚██╗ ██╔╝██║   ██║
      ███████║██╔██╗ ██║  ███╔╝ ███████║██║ ╚████╔╝ ██║   ██║
      ██╔══██║██║╚██╗██║ ███╔╝  ██╔══██║██║  ╚██╔╝  ██║   ██║
      ██║  ██║██║ ╚████║███████╗██║  ██║██║   ██║   ╚██████╔╝
      ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝   ╚═╝    ╚═════╝
        
        `,"已上线",Math.floor(c),"天","©2018 By 安知鱼 V1.6.6"],e=["NCC2-036","调用前置摄像头拍照成功，识别为【小笨蛋】.","Photo captured: ","🤪"];setTimeout(o.bind(console,`
%c${c[0]} %c ${c[1]} %c ${c[2]} %c${c[3]}%c ${c[4]}%c ${c[5]}

%c ${c[6]}
`,"color:#425AEF","","color:#425AEF","color:#425AEF","","color:#425AEF","")),setTimeout(o.bind(console,`%c ${e[0]} %c ${e[1]} %c 
${e[2]} %c
${e[3]}
`,"color:white; background-color:#4fd953","","",'background:url("https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/tinggge.gif") no-repeat;font-size:450%')),setTimeout(o.bind(console,"%c WELCOME %c 你好，小笨蛋.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c ⚡ Powered by 安知鱼 %c 你正在访问 云少 的博客.","color:white; background-color:#f0ad4e","")),setTimeout(o.bind(console,"%c W23-12 %c 你已打开控制台.","color:white; background-color:#4f90d9","")),setTimeout(console.warn.bind(console,"%c S013-782 %c 你现在正处于监控中.","color:white; background-color:#d9534f",""))})</script><script async src="/anzhiyu/random.js"></script><script async>!function(){var n,o,r,a,i,e=new Date("09/01/2018 00:00:00"),l=new Date;setInterval(()=>{var t;if(l=new Date,i=l.getHours(),t=(l-e)/1e3/60/60/24,n=Math.floor(t),t=(l-e)/1e3/60/60-24*n,o=Math.floor(t),1==String(o).length&&(o="0"+o),t=(l-e)/1e3/60-1440*n-60*o,r=Math.floor(t),1==String(r).length&&(r="0"+r),t=(l-e)/1e3-86400*n-3600*o-60*r,a=Math.round(t),1==String(a).length&&(a="0"+a),document.getElementById("footer")){let e="";e=(i<18&&9<=i||((t=document.querySelector("#workboard .workSituationImg")).src="https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-下班啦.svg",t.title="下班了就该开开心心的玩耍，嘿嘿~",t.alt="下班了就该开开心心的玩耍，嘿嘿~"),`本站居然运行了 ${n} 天<span id='runtime'> ${o} 小时 ${r} 分 ${a} 秒 </span><i class='anzhiyufont anzhiyu-icon-heartbeat' style='color:red'></i>`),document.getElementById("runtimeTextTip")&&(document.getElementById("runtimeTextTip").innerHTML=e)}},1e3)}()</script><script src="https://cdn.cbd.int/algoliasearch@4.18.0/dist/algoliasearch-lite.umd.js"></script><script src="https://cdn.cbd.int/instantsearch.js@4.56.5/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script><div class="js-pjax"><script>(()=>{const e=document.querySelectorAll("#article-container .mermaid-wrap");if(0!==e.length){const n=()=>{window.loadMermaid=!0;const a="dark"===document.documentElement.getAttribute("data-theme")?"dark":"default";Array.from(e).forEach((e,t)=>{const n=e.firstElementChild;e="%%{init:{ 'theme':'"+a+"'}}%%\n"+n.textContent;const d=mermaid.render("mermaid-"+t,e);"string"==typeof d?(t=d,n.insertAdjacentHTML("afterend",t)):d.then(({svg:e})=>{n.insertAdjacentHTML("afterend",e)})})};var t=()=>{window.loadMermaid?n():getScript("https://cdn.cbd.int/mermaid@10.2.4/dist/mermaid.min.js").then(n)};anzhiyu.addGlobalFn("themeChange",n,"mermaid"),window.pjax?t():document.addEventListener("DOMContentLoaded",t)}})()</script><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"https://twikoo.tryrun.top/",region:"",onCommentLoaded:()=>{anzhiyu.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.tk-owo-emotion)"))}},null))};var o=()=>{"object"==typeof twikoo?setTimeout(n,0):getScript("https://cdn.cbd.int/twikoo@1.6.18/dist/twikoo.all.min.js").then(n)};const n=()=>{t()};anzhiyu.loadComment(document.getElementById("twikoo-wrap"),o)})()</script><script>(()=>{const t=()=>{window.artalkItem=new Artalk(Object.assign({el:"#artalk-wrap",server:"https://artalk.tryrun.top/",site:"https://blog.tryrun.top/",pageKey:location.pathname,darkMode:"dark"===document.documentElement.getAttribute("data-theme"),countEl:".artalk-count"},null)),"null"!==GLOBAL_CONFIG.lightbox&&window.artalkItem.use(t=>{t.on("list-loaded",()=>{t.getCommentList().forEach(t=>{t=t.getRender().$content;anzhiyu.loadLightbox(t.querySelectorAll("img:not([atk-emoticon])"))})})})};var a=async()=>{"object"==typeof window.artalkItem||(await getCSS("https://cdn.cbd.int/artalk@2.5.5/dist/Artalk.css"),await getScript("https://cdn.cbd.int/artalk@2.5.5/dist/Artalk.js")),t()};anzhiyu.addGlobalFn("themeChange",t=>{var a=document.getElementById("artalk-wrap");a&&a.children.length&&window.artalkItem.setDarkMode("dark"===t)},"artalk"),window.loadOtherComment=a})()</script><input type="hidden" name="page-type" id="page-type" value="post"></div><script>window.addEventListener("load",()=>{const t=e=>e=""!==e&&150<(e=(e=(e=(e=e.replace(/<img.*?src="(.*?)"?[^\>]+>/gi,"[图片]")).replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi,"[链接]")).replace(/<pre><code>.*?<\/pre>/gi,"[代码]")).replace(/<[^>]+>/g,"")).length?e.substring(0,150)+"...":e,n=t=>{let n="";if(t.length)for(let e=0;e<t.length;e++)n=(n=(n+="<div class='aside-list-item'>")+`<a href='${t[e].url}' class='thumbnail'><img data-lazy-src='${t[e].avatar}' alt='${t[e].nick}'><div class='name'><span>${t[e].nick} </span></div></a>`)+`<div class='content'>
        <a class='comment' href='${t[e].url}' title='${t[e].content}'>${t[e].content}</a>
        <time datetime="${t[e].date}">${anzhiyu.diffDate(t[e].date,!0)}</time></div>
        </div>`;else n+="没有评论";var e=document.querySelector("#card-newest-comments .aside-list");e.innerHTML=n,window.lazyLoadInstance&&window.lazyLoadInstance.update(),window.pjax&&window.pjax.refresh(e)};var e=()=>{var e;document.querySelector("#card-newest-comments .aside-list")&&((e=saveToLocal.get("twikoo-newest-comments"))?n(JSON.parse(e)):(e=()=>{twikoo.getRecentComments({envId:"https://twikoo.tryrun.top/",region:"",pageSize:6,includeReply:!0}).then(function(e){e=e.map(e=>({content:t(e.comment),avatar:e.avatar,nick:e.nick,url:e.url+"#"+e.id,date:new Date(e.created).toISOString()}));saveToLocal.set("twikoo-newest-comments",JSON.stringify(e),10/1440),n(e)}).catch(function(e){document.querySelector("#card-newest-comments .aside-list").textContent="无法获取评论，请确认相关配置是否正确"})},"object"==typeof twikoo?e():getScript("https://cdn.cbd.int/twikoo@1.6.18/dist/twikoo.all.min.js").then(e)))};e(),document.addEventListener("pjax:complete",e)})</script><script async data-pjax src="https://npm.elemecdn.com/anzhiyu-theme-static@1.0.1/bubble/bubble.js"></script><script>var visitorMail="visitor@anheyu.com"</script><script async data-pjax src="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/waterfall/waterfall.js"></script><script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script><script src="/js/anzhiyu/right_click_menu.js"></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.1.9/icon/ali_iconfont_css.css"><script async src="/js/1.min.js?1"></script><script async src="/js/bg.js?1"></script><script async src="https://cdn1.tianli0.top/npm/sweetalert2@8.19.0/dist/sweetalert2.all.js"></script><script async src="/js/lunar.min.js?1"></script><script async src="/js/day.min.js?1"></script><script async src="/js/winbox.bundle.min.js?1"></script><script id="click-show-text" src="https://cdn.cbd.int/butterfly-extsrc@1.1.3/dist/click-show-text.min.js" data-mobile="true" data-text="富强,民主,文明,和谐,自由,平等,公正,法治,爱国,敬业,诚信,友善" data-fontsize="15px" data-random="true" async></script><link rel="stylesheet" href="https://cdn.cbd.int/anzhiyu-theme-static@1.0.0/aplayer/APlayer.min.css" media="print" onload='this.media="all"'><script src="https://cdn.cbd.int/anzhiyu-blog-static@1.0.1/js/APlayer.min.js"></script><script src="https://cdn.cbd.int/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js"></script><script src="https://cdn.cbd.int/pjax@0.2.8/pjax.min.js"></script><script>let pjaxSelectors=['meta[property="og:image"]','meta[property="og:title"]','meta[property="og:url"]','meta[property="og:type"]','meta[property="og:site_name"]','meta[property="og:description"]',"head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"];var pjax=new Pjax({elements:'a:not([target="_blank"])',selectors:pjaxSelectors,cacheBust:!1,analytics:!0,scrollRestoration:!1});document.addEventListener("pjax:send",function(){if(anzhiyu.removeGlobalFnEvent("pjax"),anzhiyu.removeGlobalFnEvent("themeChange"),document.getElementById("rightside").classList.remove("rightside-show"),window.aplayers)for(let e=0;e<window.aplayers.length;e++)window.aplayers[e].options.fixed||window.aplayers[e].destroy();"object"==typeof typed&&typed.destroy();var e=document.body.classList;e.contains("read-mode")&&e.remove("read-mode")}),document.addEventListener("pjax:complete",function(){window.refreshFn(),document.querySelectorAll("script[data-pjax]").forEach(e=>{const t=document.createElement("script");var a=e.text||e.textContent||e.innerHTML||"";Array.from(e.attributes).forEach(e=>t.setAttribute(e.name,e.value)),t.appendChild(document.createTextNode(a)),e.parentNode.replaceChild(t,e)}),GLOBAL_CONFIG.islazyload&&window.lazyLoadInstance.update(),"function"==typeof chatBtnFn&&chatBtnFn(),"function"==typeof panguInit&&panguInit(),"function"==typeof gtag&&gtag("config","G-3VMKW5TZBM",{page_path:window.location.pathname}),"object"==typeof _hmt&&_hmt.push(["_trackPageview",window.location.pathname]),"function"==typeof loadMeting&&document.getElementsByClassName("aplayer").length&&loadMeting(),"object"==typeof Prism&&Prism.highlightAll()}),document.addEventListener("pjax:error",e=>{404===e.request.status&&pjax.loadUrl("/404.html")})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script charset="UTF-8" src="https://cdn.cbd.int/anzhiyu-theme-static@1.1.5/accesskey/accesskey.js"></script></div><div id="popup-window"><div class="popup-window-title">通知</div><div class="popup-window-divider"></div><div class="popup-window-content"><div class="popup-tip">你好呀</div><div class="popup-link"><i class="anzhiyufont anzhiyu-icon-arrow-circle-right"></i></div></div></div></body></html>